1.Echarts安装
终端运行安装命令：
npm install echarts -s
在main.js做全局引用：
//引入echarts
import * as echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;
2.页面使用Echarts画柱状图和饼图
效果：
代码展示：
html
<!-- 统计信息展示 -->
<div style="display: flex; justify-content: space-around;margin-top: 36px;">
<!-- 工作量统计 -->
<div class="echart-work" ref="echartWork"></div>
<!-- 库存统计 -->
<div class="echart-work" ref="echartRepertory"></div>
</div>
mounted() {
// 挂载完成dom后进行初始化
this.showEcarts();
},
methods: {
showEcarts() {
//工作量统计
const echartWork = this.$refs.echartWork
const mycartEchartWork = this.$echarts.init(echartWork)
//库存统计
const echartRepertory = this.$refs.echartRepertory
const mycartEchartRepertory = this.$echarts.init(echartRepertory)
//绘制工作量统计图表
const optionEchartWork = {
title : {
text: '工作量统计',
subtext: '总计',
left: '2%',
top: '2%',
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
grid: [
{
top: 60,
width: '90%',
bottom: '10%',
left: 10,
containLabel: true
},
],
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : ['管理员','若依','Njcdv','曹日新','了不起的菜包','测试']
}
],
series : [
{
name:'工作量',
type:'bar',
itemStyle: {
color: 'rgb(30,144,255)'
},
data:[85, 0, 0, 143, 0, 20]
},
]
};
//绘制库存统计图表
const optionEchartRepertory = {
title : {
text: '库存统计',
subtext: '总计114',
x:'center',
top: '2%',
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['打点下载','素材','专题','其他','文档','音频']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel',],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
// restore : {show: true},
saveAsImage : {show: true}
}
},
// calculable : true,
series : [
{
name:'库存统计',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
itemStyle: {
normal: {
color: function (colors) {
var colorList = ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'];
return colorList[colors.dataIndex];
}
}
},
data:[
{value:335, name:'打点下载'},
{value:310, name:'素材'},
{value:234, name:'专题'},
{value:1548, name:'其他'},
{value:135, name:'文档'},
{value:548, name:'音频'},
]
}
]
};
// 渲染图表
mycartEchartWork.setOption(optionEchartWork)
mycartEchartRepertory.setOption(optionEchartRepertory)
}