vue使用echarts动态获取数据不渲染

原创已于 2023-07-31 14:38:13 修改 · 3.5k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #echarts

于 2021-04-19 19:32:14 首次发布

echarts数据图形专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts绘制慢日志查询图，包括设置颜色、图例、坐标轴等配置项，并通过实际数据展示图表效果。

直接上图片，做成的效果图是这样的
在这里插入图片描述
上面的现状图很简单，两列一列是采集时间，一列是查询的时常，单位（S)
直接上代码：

<template>

  <div id="main1"  style="width:100%;height: 400px;">
  </div>

</template>

<script>
    import * as echarts from 'echarts';
    export default {
      name: '',
     data() {
      return {
       chartLine: null,
      }
     },
watch: {

  //观察option的变化

  option: {

   handler(newVal, oldVal) {

    if (this.chartLine) {

     if (newVal) {

      this.chartLine.setOption(newVal);

     } else {

      this.chartLine.setOption(oldVal);

     }

    } else {

      this.drawLineChart();

    }

   },

   deep: true //对象内部属性的监听，关键。

  }

 },
     mounted() {
      this.$nextTick(() => {
        this.drawLineChart();
      })
     },
     methods: {
      drawLineChart() {
       var inthis = this
       inthis.chartLine = echarts.init(this.$el, 'shine');// 基于准备好的dom，初始化echarts实例
       let option = {
          color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

        tooltip: {
         trigger: 'axis'
        },
        legend: {
         data: ['慢日志查询']
        },
        toolbox: {
            //show: true,
            itemSize: 20,
            itemGap: 30,
            right: 50,
            feature: {
                dataView: {show:true},
                saveAsImage: {
                    //excludeComponents :['toolbox'],
                    pixelRatio: 2
                }
            }
},
    //      dataZoom: [{
    //     type: 'inside',
    //     start: 0,
    //     end: 100
    // }, {
    //     start: 0,
    //     end: 100
    // }],
        calculable: true,
        xAxis: [
         {
          type: 'category',
          boundaryGap: false,
          axisTick: {
           show: false
          },
          data: []
         }
        ],
        yAxis: [
         {
          type: 'value',
          axisTick: {
           show: false
          },
          name: '（秒）'
         }
        ],
        series: [
                 {
          name: '慢日志查询',
          type: 'line',
          stack: '总量',
          data:[]
         }
        ]
       };
       // 使用刚指定的配置项和数据显示图表
       inthis.chartLine.setOption(option);//这一句如果不添加，那么echarts图片无法渲染
       // inthis.chartLine.showLoading();
       this.$store.dispatch('slowloghis/slowloghisgraph').then(res => {
        let arr1 = []
        let arr2 = []
        res.forEach(function (item, index) {
         arr1.push(item.ts_max)
         arr2.push(item.query_time_max)
        })
        inthis.chartLine.setOption({
         xAxis: {
          data: arr1
         },
         series: [
         {
          name: '慢日志查询',
              color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
          type: 'line',
          stack: '总量',
          data:arr2
         }

        ]
        }


        );
       })
window.addEventListener("resize", inthis.chartLine.resize);
       console.log(inthis.chartLine)
      }
     }
    }
</script>

<style scope>
    /*#main{*/
    /*    width:50%;*/
    /*    height:100px;*/
    /*}*/
</style>

上面的代码windows.addEventListener是一个自适应屏幕显示比例的功能，可以自动缩放

inthis.chartLine.setOption(option);//这一句如果不添加，下面echarts图片无法渲染，会报错
Uncaught (in promise) TypeError: Cannot read property ‘get’ of undefined
at isCategory (referHelper.js?8b7f:187)
at cartesian2d (referHelper.js?8b7f:133)
at getCoordSysInfoBySeries (referHelper.js?8b7f:115)
at createListFromArray (createListFromArray.js?3301:90)
at ExtendedClass.getInitialData (LineSeries.js?217b:51)
at ExtendedClass.init (Series.js?4f85:136)
at ExtendedClass.eval (Global.js?7e63:238)
at Array.forEach ()
at each (util.js?1ee1:300)
at ExtendedClass.visitComponent (Global.js?7e63:212)
通过console打印我可以知道我的结果可
但是如果template模板这样写

  <div>
  <div id="main1"  style="width:100%;height: 400px;">
  </div>
</div>

什么都显示不出来
查看元素也是直接ID=“main1"没有了找不出问题，为了解决最后只能使用了v-charts

技术无止境