前端胖籽 | Echarts实践笔记

数据很多的时候，往往以图表的形式表现出来显得更加直接

最近使用vue-echarts-v3时，遇到很多问题，小胖籽也在这里做个整理。

图表引入成功以后，无法显示，报错

full.js?5fd1:10     Can't get dom width or height

解决办法：

对应的dom元素（即放置图形的dom）需要在调用echart.init之前，就要给图形dom加上对应的宽度和高度，必须，不然就会提示这个，给这个图表加上高度和宽度

div.vue-echarts{

width: 1000px;

height: 600p'x;

}

如何设置图表同序列不同数据点的独立颜色值

itemStyle: {

normal: {

color: function(params) {

// build a color map as your need.

var colorList = [    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ];

return colorList[params.dataIndex]

}

设置最大值/最小值/平均值

markPoint: {

data: [

{ type: 'max', name: '最大值',symbolSize:70 },

{ type: 'min', name: '最小值',symbolSize:70  }

],

}

markLine: {

data: [

{ type: 'average', name: '平均值' }

],

}

显示坐标轴的单位

yAxis: {

axisLabel: {

formatter: '{value}万'

},

坐标轴显示不全

xAxis: {

data: ["河南", "云南", "江苏", "山西", "河北", "浙江", "广西", "内蒙古", "湖北", "西藏", "山东", "甘肃", "青海", "湖南", "广东", "未知", "四川", "天津", "吉林", "安徽", "海南", "黑龙江", "辽宁", "上海", "贵州", "北京", "重庆", "江西", "宁夏", "陕西", "新疆", "福建"],

axisLabel: {

//  interval:0,//横轴信息全部显示

//  rotate:-20,//-30度角倾斜显示

//x轴的文字全部显示并且为竖行显示

interval: 0,

formatter: function (value) {

return value.split("").join("\n");

}

}

},