Vue-ele中echart折线图动态展示和修改

Posted 2023-05-08

参考技术A <LineChart  :reportsList="reportsList"  v-if="Object.keys(reportsList).length" />

data()

    return

      reportsList: ,

    ;

  ,

  created()

    reportsGet("reports/type/1").then((res) =>

      console.log(res);

      let meta, data = res.data;

      if (meta.status == 200)

        this.reportsList = data;

      else

        this.$message.error(meta.msg);

     

    );

  ,

data()

    return

      lineList: ,

    ;

  ,

  props:

    reportsList:

      type: Object,

      default: () =>

        return

          title:

            text: "折线图",

          ,

          tooltip: ,

          xAxis:

            axisLabel: interval: 0, rotate: 0, margin: 15 ,

            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],

          ,

          yAxis: ,

          series: [

           

              name: "销量",

              type: "line",

              data: [5, 20, 36, 10, 10, 20],

            ,

          ],

        ;

      ,

    ,

  ,

  mounted()

    var myChart = echarts.init(this.$refs.main);

    this.lineList = JSON.parse(JSON.stringify(this.reportsList));

    this.lineList.title =

      text: "折线图",

    ;

/* 给折线图设置上下左右的距离 */

    this.lineList.legend.top='10%';

    this.lineList.xAxis[0].axisLabel =

      interval: 0, rotate: 30, margin: 15 ;

    this.lineList.grid =

      top: "30%",

      width: "80%",

      height: "50%",

      left: "20%",

    ;

    /* 把折线图所属区域删掉 */

    this.lineList.series.forEach(r=>

      delete r.areaStyle;

      r.smooth=true

    )

    myChart.setOption(this.lineList);

    window.LineChart = myChart;

  ,

;

echarts解决问题网址

　　　　　　　　　　使用echarts制作折线图

1.  修改主题颜色，需要下载主题js文件然后再在初始化echarts图表的时候，在后面写上主题名称

2.  echarts折线图分段用不同颜色表示，方法链接：

　　https://blog.csdn.net/a_leading/article/details/77891530

3.  解决echarts折线图X轴数据展示不完全的问题，方法链接：

　　https://blog.csdn.net/kebi007/article/details/68488694