Ant Design Vue 中使用 echarts
1.添加依赖yarn add echarts2.在vue项目的main.js中importimport * as echarts from 'echarts'Vue.prototype.$echarts = echarts3.在想要添加图表的页面中进行操作:methods: {drawChart() {// 基于准备好的dom,初始化echarts实例let myChart = this.$ech
·
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属性:
<canvas id="mission" class="chartBox" style="width: 100%; height:400px; border-radius:16px;" ></canvas>
在drawChart方法中的初始化语句中手动设置组件尺寸,不然很可能会模糊,并且比例错误比如:
改为尺寸与html中的一致,还可以用devicePixelRatio调整清晰度:
let myChart = this.$echarts.init(document.getElementById("mission"), null, {width: 600,height: 400,devicePixelRatio: 4});
更多推荐
已为社区贡献3条内容
所有评论(0)