一、echarts使用步骤:
1、安装
npm install echarts --save
2、引入
import echarts from “echarts”;
3、在html页面上定义
<div id="pie" style="width: 800px;height:800px;"></div>
4、初始化
mounted(){
this.myCharts=echarts.init(document.getElementById('pie'));
var option = {
title : {
text: '同名数量统计',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// legend: {
// type: 'scroll',
// orient: 'vertical',
// right: 10,
// top: 20,
// bottom: 20,
// data: data.legendData,
//
// selected: data.selected
// },
series : [
{
name: '姓名',
type: 'pie',
radius : '55%',
center: ['40%', '50%'],
color:this.colorInit,
data: data.seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
}
5、定义options,和data
6、 this.myCharts.setOption(option);
二、问题
2.1 Error in v-on handler: “TypeError: Cannot read property ‘getAttribute’ of null”
错误原因:Echarts的图形容器还未生成就对其进行了初始化所造成的
解决方法:
var echartsname=document.getElementById("guimo-pollutant");
var myChart = echarts.init(echartsname);
2.2 在用地图的时候,容器大小不能写百分比,需写具体的px值