echarts折线图详解

• 文章主要针对自己在项目中使用echarts折线图遇到的问题进行的总结，主要介绍
  两部分内容，1.echars图宽度适配问题 2.折线图点击事件

• 首先介绍一下宽度适配，首先我是通过动态赋值的方式给echars图赋值的，先初始化定义一个值然后通过获取屏幕宽度的方式给图表宽度赋值（我这在再移动端应用的）,

• 因为我一开始写的echars图width:100%如果初始化不需要隐藏图表的话也可行，但是如果默认图是隐藏的点击按钮才展示就会存在宽度不适配的问题，就可以用下面代码介绍的方式

data() {
  return {
    echartWidth:'350',
  };
},  
setEchartsWidth(){
      var _width =document.body.clientWidth
      if(_width<=0){
         _width= that.echartWidth
      }else{
         _width=_width
      }
      that.echartWidth=_width
     },

下面在介绍一下折线图绑定事件吧，通过点击折线图的点实现数据联动，我通过代码来展示吧，请看下面的代码

    /*echarts图方法 */
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart =echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        color: "#fbac45",
        grid: {
          x:70,
          y: 20,
          x2: 30,
          y2: 30,
          borderWidth: 1,
        },
        tooltip: {
          trigger: 'axis',
          extraCssText: 'z-index: 9',//调整层级，当鼠标移上展示的图例会遮挡其他元素的话，
                                      可以通过此属性调整层级
        formatter:function(params){
        return params[0].name+":"+"￥"+params[0].data;
        }
        },
        xAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#A8A8A8",
            },
          },
          axisLabel: {
            interval: 0,
            // rotate:-30
          },
          axisTick: {
            show: false, // 是否显示坐标轴刻度 默认为true 显示
            alignWithLabel: true, //坐标轴刻度与标签对齐  如果不设置 默认坐标刻度与刻度标签不对齐
          },
          type: "category",
          data: _monthList,
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
            onZero: false,
            lineStyle: {
              color: "#A8A8A8",
            },
          },
            axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter: '￥{value}'
                },
          type: "value",
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: _monthDataList,
            type: "line",
            smooth: true,
            mbolSize:30, // 拐点圆的大小
          },
        ],
     });
        //绑定事件              
     myChart.on('click', function (params) {
    // 控制台打印数据的名称，打印params看一下接口中所需要的数据 str就是我需要的数据传给接口就可以实现点击图
     str=params.name
      myChart.clear();   //清除画布,不清除可能会导致多次渲染图表的情况一定要清一下
     that.getUserLabelInfo(str)
     myChart.off('click');  //解绑点击事件
 });
}
},

折线图绑定事件在项目中适用性不高，在手机端不好操作，要是有其他的好用的办法可以在评论区留下建议~