echart采坑小记

1.图表不显示？
(1)是否正确引入echart。
(2)是否设置容器的宽度及高度。
2.echart初始化时动态设置图表高度及宽度，图表内容溢出容器？
这个问题研究了很久都没找到答案，最后很无耻的采用了resize()方法。。。
let width = ($("#chart2-continer").width()); //动态获取容器宽度 $("#chart2").css('width', width); //设置图表的宽度为容器的宽度 let myChart2 = echarts.init(document.getElementById("chart2")); //基于准备好的dom，初始化echarts实例 let option2 ={ ...... //配置及数据 } myChart2.setOption(option2); myChart2.resize(); //修复初始化canvas超出图表容器bug
3.如何自定义图表的颜色？
在option的配置项里添加color属性，对应属相值为一个数组，默认值为['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']。
let option2 ={ color :['#1e87f0', '#32d296'] }
4.如何将纵坐标显示为百分比？
在option的配置项里添加yAxis属性
yAxis: [{ name: "覆盖率", //纵坐标的名字 axisLabel: { formatter: '{value} %', //将数据显示为对应的百分比 }， axisLine: { show: false //是否显示坐标轴轴线 }, axisTick: { show: false //是否显示坐标轴刻度,通俗点说就是轴线旁边的小横线 }, }]
5.如何设置纵坐标的最大值及最小值(默认为自适应)
在option的配置项里添加yAxis属性
yAxis: [{ axisLabel: { textStyle: { color: '#666666', fontSize: 12, } }, min:0, //纵坐标最小值 max:100, //纵坐标最大值 }],