在Ant Design (VUE)中使用ECharts

时间：2024-12-19 17:04:10

1.安装echarts依赖   

npm install echarts --save

安装完依赖后在文件看到echarts相对应的版本号

2.在中全局中引用

import echarts from 'echarts'

.$echarts = echarts

3.在你需要用到echart的地方先设置一个div的id、宽高，

例子：        

<div  style="width: 90%;height:400px;"></div>

相关的js

 methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$(("main"));
      // 指定图表的配置项和数据
      let option = {
        legend: {},
        tooltip: {},
        dataset: {
            dimensions: ['product', '业务类型', '额度占用情况', '缴纳情况'],
            source: [
                {product: '水果1', '业务类型': 43.3, '额度占用情况': 85.8, '缴纳情况': 93.7},
                {product: '水果2', '业务类型': 83.1, '额度占用情况': 73.4, '缴纳情况': 55.1},
                {product: '水果3', '业务类型': 86.4, '额度占用情况': 65.2, '缴纳情况': 82.5},
                {product: '水果4', '业务类型': 72.4, '额度占用情况': 53.9, '缴纳情况': 39.1},
                {product: '水果5', '业务类型': 43.3, '额度占用情况': 85.8, '缴纳情况': 93.7},
                {product: '水果6', '业务类型': 83.1, '额度占用情况': 73.4, '缴纳情况': 55.1},
                {product: '水果7', '业务类型': 86.4, '额度占用情况': 65.2, '缴纳情况': 82.5},
                {product: '水果8', '业务类型': 72.4, '额度占用情况': 53.9, '缴纳情况': 39.1}
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of  by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      (option);
    }
  },
  mounted() {
    ();
  }

官网

想要什么效果的插件可以自行到官网取/zh/

如需要更换效果直接在echarts官网

拷贝红色圈圈的代码覆盖js里面的let option即可。但是具体数据从后台接口获取，一定要对应上，以免效果不能实现。

5.我项目的效果图

 

大神勿喷，这只是个人项目小积累，也希望能帮助到刚接触echarts配置到项目的朋友。

相关文章