vue中怎么使用echart图表

最新推荐文章于 2024-09-02 11:37:25 发布

清幽子

最新推荐文章于 2024-09-02 11:37:25 发布

阅读量322

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_45489665/article/details/119249872

版权

ECharts 饼图动态调整数据绑定窗口适配

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

首先

 npm install echarts --save

在页面中，写入dom

<div id="chart" style="width: 100%; height: 600px"></div>

import * as echarts from 'echarts';

export default {
//调用getEchartData方法
  mounted() {
    this.getEchartData();
  },
  
  methods: {
    getEchartData() {
      let getChart = echarts.init(document.getElementById("chart"));
      
      //引入需要的option，这里引入的是四个饼型图
      
      var option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
            ["Milk Tea", 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ["Matcha Latte", 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ["Cheese Cocoa", 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
            ["Walnut Brownie", 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
          ],
        },
        series: [
          {
            type: "pie",
            radius: "20%",
            center: ["25%", "30%"],
            // No encode specified, by default, it is '2012'.
          },
          {
            type: "pie",
            radius: "20%",
            center: ["75%", "30%"],
            encode: {
              itemName: "product",
              value: "2013",
            },
          },
          {
            type: "pie",
            radius: "20%",
            center: ["25%", "75%"],
            encode: {
              itemName: "product",
              value: "2014",
            },
          },
          {
            type: "pie",
            radius: "20%",
            center: ["75%", "75%"],
            encode: {
              itemName: "product",
              value: "2015",
            },
          },
        ],
      };
      getChart.setOption(option);
      
      //随着屏幕大小调节图表
      
      window.addEventListener("resize", function () {
        getChart.resize();
      });
    },
  },
};
</script>