echart采坑小记

图表不显示？

(1)是否正确引入echart。
(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

如何自定义图表的颜色？

在option的配置项里添加color属性，对应属相值为一个数组，默认值为['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']。

let option2 ={
     color   :['#1e87f0', '#32d296']
   }  

如何将纵坐标显示为百分比？

在option的配置项里添加yAxis属性

 yAxis: [{
                name: "覆盖率", //纵坐标的名字
                axisLabel: {
                    formatter: '{value} %',   //将数据显示为对应的百分比
                }，
                axisLine: {
                    show: false  //是否显示坐标轴轴线
                },
                axisTick: {
                    show: false  //是否显示坐标轴刻度,通俗点说就是轴线旁边的小横线
                },
            }]

如何设置纵坐标的最大值及最小值(默认为自适应)

在option的配置项里添加yAxis属性

 yAxis: [{
                axisLabel: {
                    textStyle: {
                        color: '#666666',
                        fontSize: 12,
                    }
                },
                min:0,  //纵坐标最小值
                max:100, //纵坐标最大值
            }],

如何自定义tooltip？

(1)使用字符串模板，参考官方文档
(2)使用回调函数

 tooltip: {
                trigger: 'item',
                textStyle:{
                    align:'left'
                }, 
                formatter: function(params){  
                    let res = '<p>'+ params.name+'</p><p>'+params.marker+params.seriesName + ':'+ params.value + '%' + '   '+ '总量:'+params.value+'</p>';
                    console.log(params);
                   return res;
                }
            }