Ant Design Vue 中使用 echarts_学而不思则忘，思而不学则die_ant echarts vue

网络投稿 02-07 7429

1.添加依赖

yarn add echarts

2.在vue项目的main.js中import

import * as echarts from 'echarts' Vue.prototype.$echarts = echarts

?3.在想要添加图表的页面中进行操作：

methods: { drawChart() { // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("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 dataset.source by default. series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } }, mounted() { this.drawChart(); }

4.在echarts官网中查找案例：Apache ECharts?

问题1：组件模块以圆角矩形呈现

实在不知道怎么解决比较好，就用简单粗暴的方法来达到效果了。

首先盛放echarts的div改为canvas，并直接在style里添加border-radius属性：

在drawChart方法中的初始化语句中手动设置组件尺寸，不然很可能会模糊，并且比例错误比如：

改为尺寸与html中的一致，还可以用devicePixelRatio调整清晰度：

let myChart = this.$echarts.init(document.getElementById("mission"), null, {width: 600,height: 400,devicePixelRatio: 4});