vue中使用echarts
echarts的安装
npm install echarts --save
在vue-cli中引入echarts
import echarts from 'echarts'
全局注册echarts
Vue.prototype.$echarts = echarts
引入echarts以及在全局注册要写在main.js文件中（谨记）
vue项目中详细使用echarts
初始化echarts实例
var echarts = require("echarts");
绘制自己想要的图表
- 先构建html架构模块和基本的css样式属性
<div class="showdata">
<div id="chartColumn" ref="chart" :style="{width : '495px', height : '300px'}"></div>
<div style="width: 10px;display: flex"></div>
<div id="chartBar" :style="{width: '495px',height: '300px'}"></div>
</div>
.showdata {
display: flex;
}
#chartColumn {
display: flex;
background-color: rgba(36, 201, 196, 0.68);
border: 1px solid #ccc;
}
#chartBar {
display: flex;
background-color: rgba(58, 239, 218, 0.97);
border: 1px solid #ccc;
}
- 根据所需，绘图，将数据属性写入echarts中
drawColumnChart() {
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
this.chartColumn.setOption({
title: {
text: '通过淘汰占比',
left: 'center',
top : 20
},
tooltip: {
trigger: 'item',
formatter : "{b} : {c} ({d}%)"
},
legend: {
top :10,
orient: 'vertical',
left: 10
},
series: [
{
name: '面试状态',
type: 'pie',
radius: '50%',
label: { normal: { show: true, formatter: "{b} : {c} ({d}%)" } },
data: [
{ value: 50, name: '通过' },
{ value: 35, name: '淘汰' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
itemStyle: {
normal: {
color: function (params) {
let colorList = [
"rgba(9,67,243,0.88)",
"rgba(241,214,47,0.97)"
];
return colorList[params.dataIndex];
}
}
}
}
]
});
},
|