1. Install echarts dependencies
npm install echarts --save
2. Introduce echarts globally in main.js
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3. Introduce echarts into the page
① Use div to install the echarts chart and place it where you want.
<div id="echart" style="width: 100%;height:300px"></div>
To identify this component by id, it is best to give a style width and height here, otherwise it may not be loaded.
② Define the method drawCharts in methods to draw this chart.
methods: {
drawChart() {
// 这里的echart同div里的id名相同即可
const myChart = this.$echarts.init(document.getElementById("echart"));
// option为一个设置图表格式的数组
myChart.setOption(this.option);
},
},
③ Remember that the rendering of this method cannot be placed in create(), but must be placed in mounted().
mounted() {
this.drawChart();
},
The option is the setting for this chart. The example option given on the official website is this thing.
④ Give a simple option
Just follow the examples on the official website and select the options you need.
option: {
title: {
text: "测试用例",
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
name: "数量",
type: "pie",
radius: "50%",
data: [
{ value: 1048, name: "测试用例1" },
{ value: 735, name: "测试用例2" },
{ value: 580, name: "测试用例3" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
},
4. Page effects and complete code
① Sample effect
② Sample complete code
<template>
<div>
<div id="echart" style="width: 100%; height: 300px"></div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
option: {
title: {
text: "测试用例",
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
name: "数量",
type: "pie",
radius: "50%",
data: [
{ value: 1048, name: "测试用例1" },
{ value: 735, name: "测试用例2" },
{ value: 580, name: "测试用例3" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
},
};
},
created() {
},
methods: {
drawChart() {
const myChart = this.$echarts.init(document.getElementById("echart"));
myChart.setOption(this.option);
},
},
mounted() {
this.drawChart();
},
};
</script>
<style scoped lang="less">
</style>
5. Possible errors and solutions
① Error: Initialize failed: invalid dom.
Put this.drawChart(); in create, not in mounted.
② Error in mounted hook: "ReferenceError: echarts is not defined"
Echarts is not quoted correctly, especially check whether there is an error in the quoted section, and whether it is globally referenced in main.js.
const myChart = this.$echarts.init(document.getElementById("echart"));