Article directory
- Preface
- 1. What are echarts?
- 2. Usage steps
-
- 1. Import the library
-
- Get from npm
- other methods
- 2. Introduce ECharts into the project
-
- Import all
- Introduce on demand
- 2. Project practice
-
- Define parent container
- Summarize
Foreword
This article will introduce how to start from 0 in the Vue project and use echarts to draw a simple chart in the project
1. What are echarts?
ECharts, an open source visualization library implemented using JavaScript, can run smoothly on PCs and mobile devices, and is compatible with most current browsers (IE9/10/11, Chrome, Firefox, Safari, etc.). The underlying layer relies on the vector graphics library ZRender. , providing intuitive, interactive, and highly customizable data visualization charts.
2. Usage steps
1. Import library
Get from npm
npm install echarts
Other ways
Other ways to obtain from echarts official website
2. Introducing ECharts into the project
Introduce all
import * as echarts from 'echarts';
Introduction on demand
//Introducing the echarts core module, which provides the necessary interfaces for echarts use.
import * as echarts from 'echarts/core';
//Introduce bar chart charts, the chart suffix is Chart
import {<!-- --> BarChart } from 'echarts/charts';
//Introduce prompt box, title, rectangular coordinate system, data set, built-in data converter component, the component suffix is Component
import {<!-- -->
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// Label automatic layout, global transition animation and other features
import {<!-- --> LabelLayout, UniversalTransition } from 'echarts/features';
//Introduce the Canvas renderer. Note that introducing CanvasRenderer or SVGRenderer is a necessary step.
import {<!-- --> CanvasRenderer } from 'echarts/renderers';
//Register necessary components
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
//The next use is the same as before, initialize the chart and set the configuration items
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({<!-- -->
// ...
});
The “Complete Code” tab on the sample editing page provides a very convenient function to generate on-demand code. This feature will dynamically generate minimal on-demand code based on the current configuration items. You can use it directly in your project.
2. Project practice
Define parent container
You need to first define a
// A code block <div id="main" style="width: 800px; height: 800px"> </div>
Get the DOM node just created, initialize an echarts instance through the echarts.init method and generate a simple chart through the setOption method
// Get DOM node
var chartDom = document.getElementById("main");
//Initialize an Echarts instance
var myChart = echarts.init(chartDom);
//Set configuration to generate icon
myChart.setOption(option);
The following is the complete code
<template>
<div id="main" style="width: 800px; height: 800px">
</div>
</template>
<script>
import * as echarts from "echarts";
var option;
// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000 -06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73 ], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06 -15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22 ", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], [\ "2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29" , 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000 -07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72 ], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07 -10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17 ", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], [\ "2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24" , 60]];
const dateList = data.map(function (item) {<!-- -->
return item[0];
});
const valueList = data.map(function (item) {<!-- -->
return item[1];
});
const valueList1 = data.map(function (item) {<!-- -->
return item[1] - 10;
});
option = {<!-- -->
// Make gradient line here
title: [
{<!-- -->
left: "center",
text: "Gradient along the y axis",
},
{<!-- -->
top: "55%",
left: "center",
text: "Gradient along the x axis",
},
],
tooltip: {<!-- -->
trigger: "axis",
},
xAxis: [
{<!-- -->
data: dateList,
alignTicks: true,
splitLine: {<!-- -->
show: true,
},
minorSplitLine: {<!-- -->
show: true,
},
boundaryGap: false,
},
{<!-- -->
data: dateList,
gridIndex: 1,
minorTick: {<!-- -->
show: true,
},
},
],
yAxis: [
{<!-- -->
splitLine: {<!-- -->
show: true,
},
},
{<!-- -->
gridIndex: 1,
},
],
grid: [
{<!-- -->
bottom: "60%",
},
{<!-- -->
top: "60%",
},
],
series: [
{<!-- -->
type: "line",
showSymbol: false,
stack: "Total",
data: valueList,
},
{<!-- -->
type: "line",
showSymbol: false,
stack: "main",
data: valueList1,
},
{<!-- -->
type: "line",
showSymbol: false,
data: valueList,
xAxisIndex: 1,
yAxisIndex: 1,
},
],
};
export default {<!-- -->
name: "test",
data() {<!-- -->
return {<!-- -->};
},
methods: {<!-- -->
setOption() {<!-- -->
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
myChart.setOption(option);
},
},
mounted() {<!-- -->
this.setOption();
},
};
</script>
Summary
The above is what I will talk about today. This article only briefly introduces the use of Echarts. The configuration items and API of Echarts have not been introduced yet. It is recommended that you go to the official website to check it directly. You don’t need to remember everything. You can have an impression and check it when needed.