如何在vue中使用ECharts

一. 打开ECharts官网,点击快速入门

下面是ECharts官网的链接 https://echarts.apache.org/

二.在vue中使用

1.首先先引入Echarts js文件

如下图，下面的第一张图片是官网的实现，第二章图片是我根据官网的实现

2.给ECharts 创建一个DOM容器

3. 使用echarts.init方法初始化一个实例，并通过 setOption 方法给它赋值

官网的具体实现代码

官网的效果图

我们在vue中实现时需要注意我们需要将这部分的代码挂载到mounted方法中

下面是我们的代码实现

mounted() {
        this.myChart = echarts.init(document.querySelector('#main'))
        option = {
          // 大标题
          title: {
            text: '消费账单列表',
            subtext: 'Fake Data',
            left: 'center'
          },
          // 提示框
          tooltip: {
            trigger: 'item'
          },
          // 图例
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          // 数据项
          series: [
            {
              name: '消费账单',
              type: 'pie',
              radius: '50%', // 圆的半径
              data: [
                // { value: 1048, name: '球鞋' },
                // { value: 735, name: '防晒霜' },

              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(option);
      },

4.根据后端数据动态修改ECharts的内容

找到应用篇中的动态的异步数据

此时只需要将要修改的数据重新用setOption赋值即可，未修改的数据不用动

在此处的修改应该发生在数据发生改变时。如数据减少或增加时，一般用于页面渲染的方法中

原文地址：https://blog.csdn.net/qq_74351687/article/details/144359555

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！