首先需要安装echarts:
npm install echarts --save
安装完之后为了方便不用在对应的组件引用我的做法是main.js全局注册,当然全局注册的话我全局引入了所有,这样会导致引入过多项目可能会卡顿,所以如果有需要的话也可以按需引入部分的图标:
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
然后就是组件里面应用了:对应的位置调用封装的方法即可比如在接口请求完数据处理完:
<div class="ring" ref="ringStatistical"> </div>//对应的盒子
methods: {
initResultsStatistics() { //对应的位置调用封装的方法即可
this.statisticsChart = this.$echarts.init(this.$refs.statisticsChart)
let option = {
title: {
text: '' //对应的标题
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
itemWidth: 10,
itemHeight: 10,
// show: true,
right: '0', //图例的位置
padding: [20, 0, 0, 0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
textStyle: {
fontSize: 12,
color: '#B9E9E8',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: [0, 0.01],
data: this.orgNameList,
axisTick: {
show: false, // 是否显示,默认为false
},
axisLine: {
lineStyle: {
show: true, // 是否显示
color: '#09605B', // 坐标轴线线的颜色
}
}, // 坐标轴 轴线
axisLabel: {
rotate: -60,
formatter: function (value) { 坐标轴字数限制
if (value.length > 5) {
return `${value.slice(0, 5)}...`;
}
return value;
}
}
},
yAxis: {
type: 'value',
data: [],
splitLine: { // 网格线
show: false // 是否显示,默认为false
},
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
lineStyle: {
color: '#09605B',
width: 1,
type: 'solid',
}
},
axisTick: {
show: true // 是否显示,默认为false
},
},
series: [ // 双柱显示
{
name: '照片',
type: 'bar', // 图表的类型 ‘line’折现图类型,‘pie’饼图类型
data: this.imgList, //处理好的对应的数据类型
itemStyle: { //柱状颜色和圆角
barBorderRadius: [5, 5, 0, 0], // (顺时针左上,右上,右下,左下)
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [ //柱状图的颜色渐变
{ offset: 0, color: 'rgba(0,154,252,0)' },
{ offset: 0.5, color: 'rgba(0,154,252,0.7)' },
{ offset: 1, color: '#188df0' }
])
},
},
{
name: '视频',
type: 'bar',
data: this.VideoList,
itemStyle: { //柱状颜色和圆角
barBorderRadius: [5, 5, 0, 0], // (顺时针左上,右上,右下,左下)
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: 'rgba(241,189,49,0)' },
{ offset: 0.5, color: 'rgba(241,189,49,0.7)' },
{ offset: 1, color: '#F1BD31' }
])
},
}
]
}
this.statisticsChart.setOption(option)
window.addEventListener("resize", () => { //关键代码图表可以随着屏幕窗口的大小变化而自适应
if (this.statisticsChart) {
this.statisticsChart.resize()
}
})
}
具体很多的属性样式还需看官方文档,本文只是简单的基本使用。