vue+ECharts组件封装及饼图实现圆环进度条 _进度条

著论准过秦，作赋拟子虚。这篇文章主要讲述vue+ECharts组件封装及饼图实现圆环进度条相关的知识，希望能为你提供帮助。
项目需求如下图，1、3柱状图只有title和y轴的data不同，4个饼图颜色和data不同，可以封装一个简单组件使用。

文章图片

实现思路1.首先，根据自己项目实际情况分析需要哪些变量，柱图为例，width和height都是在父组件中通过样式控制的，只需要传递title、x轴y轴的data即可
2.新建子组件barChart.vue
< script>
export default
name: " pieChart" ,
props:
id:
type: String,
default: " chart" ,
,
refName:
type: String,
default: " chart" ,
,
chartData:
type: Object,
required: true,
,
,
data()
returnchart: null ;
,
computed: ,
mounted()
this.$nextTick(() =>
this.initChart();
);
,
beforeDestroy()
if (!this.chart)
return;

this.chart.dispose(); // 销毁echart
this.chart = null;
,
watch:
chartData:
deep: true,
handler(val)
this.setOptions(val); // 监听数据变化
,
,
,
components: ,
methods:
// 初始化图表
initChart()
// 如果使用id，this.chart = this.$echarts.init(document.getElementById(this.id));
this.chart = this.$echarts.init(this.$refs[this.refName]);
this.setOptions(this.chartData);
window.addEventListener(" resize" , function ()
this.chart.resize();
);
,
// 图表配置项
setOptions( title, data, days= )// 父组件传递标题，y轴data，x轴日期
this.chart.setOption(
title: [

text: title, // 标题
left: 0,
textStyle:
fontSize: 18,
color: " #3b4859" ,
,
,

text: " 最近7天" ,
left: 85,
top: 4,
textStyle:
fontSize: 14,
color: " #3b4859" ,
,
,
],
grid:
top: 70,
bottom: 30,
left: 40,
right: 15,
,
tooltip:
show: true,
,
xAxis:
type: " category" ,
data: days, // x轴日期
axisLabel:
show: true,
textStyle:
color: " #bababa" , //更改坐标轴文字颜色
,
,
axisLine:
lineStyle:
color: " #bababa" , //更改坐标轴颜色
,
,
,
yAxis:
type: " value" ,
name: " 景数" ,
nameTextStyle:
padding: [0, 0, 0, -35], // 上右下左与原位置距离
,
axisLabel:
show: true,
textStyle:
color: " #bababa" ,
,
,
axisLine:
lineStyle:
color: " #bababa" ,
,
,
,
series: [

data: data, // y轴数据
type: " bar" ,
barWidth: 20, // 柱子宽度
itemStyle:
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
offset: 0, color: " #09dbd6" ,
offset: 1, color: " #7d98fe" ,
]), // 柱子颜色渐变
barBorderRadius: [25, 25, 0, 0], // 柱子圆角
,
,
],
);
,
,
;
< /script>

3.父组件调用

< template>
< div>
< bar-chart :id=" barChart" ref=" barChart" :chartData=https://www.songbingjia.com/android/" barChartData" />
< /div>
< /template>
< script>
import barChart from " ./components/barChart.vue" ; // 引入柱图组件
export default
name: " index" ,
components:barChart ,
data()
return
barChartData:// 柱图数据
title: " 归档景数" ,
data: [115, 259, 411, 317, 80, 140, 300],
days: [], //days通过获取日期方法计算
,

,
created()
this.get7Days(); // 获取最近7天日期方法

methods:
get7Days()// 获取最近七天日期
let days = [];
var day = new Date();
for (let i = 0; i < = 24 6; i += 24)
//今天加上前6天
let dateItem = new Date(day.getTime() - i 60 60 1000); //使用当天时间戳减去以前的时间毫秒（小时分秒*毫秒）
let y = dateItem.getFullYear(); //获取年份
let m = dateItem.getMonth() + 1; //获取月份js月份从0开始，需要+1
let d = dateItem.getDate(); //获取日期
m = this.addDate0(m); //给为单数的月份补零
d = this.addDate0(d); //给为单数的日期补零
let valueItem = y + " -" + m + " -" + d; //组合
days.push(valueItem); //添加至数组

days.reverse();
this.barChartData.days = days; // 赋值给要传递的数据
return days;
,
// 个位数前+0
addDate0(time)
if (time.toString().length == 1)
time = " 0" + time.toString();

return time;
,
,

< /script>

## 饼图实现圆环进度条饼图的封装及条用与柱图方法一致，区别只是配置项及传递的参数，不再过多赘述，这里主要讲一下如何用饼图模拟圆环进度条。进度条部分为data1，这个数据是后台返回的，灰色部分为data2，通过100%-data1得出data2的值，注意需要取消鼠标移入高亮和放大效果 > 取消移入高亮可以通过改echart源码中的mouseover实现。我这里是将灰色部分高亮时的颜色和默认颜色设置成相同值实现的,即设置normal和emphasis属性。饼图组件的options：

setOptions( color, data1, data2= )
this.chart.setOption(
color: [color, " #eeeeee" ],
series: [

name: " xx" ,
type: " pie" ,
radius: [" 65%" , " 90%" ], // 决定圆环的位置及粗细
avoidLabelOverlap: false, // 是否启用防止标签重叠策略
hoverAnimation: false, // 关闭放大动画
selectedOffset: 0, // 选中块的偏移量
label:
show: false,
position: " center" ,
formatter: " d%" ,
,
labelLine:
show: false,
,
data: [
// 进度条数据data
value: data1,
name: " xx" ,
selected: true, //默认选中第一块
label:
show: true, //默认显示第一块
fontSize: " 20" ,
color: color,
,
,
// 灰色块data
value: data2,
name: " xx" ,
itemStyle:// 设置相同的默认颜色和高亮颜色
normal:color: " #eeeeee" ,
emphasis:color: " #eeeeee" ,
,
,
],
itemStyle:
borderWidth: 5, //设置的是每项之间的留白
borderColor: " #fff" ,
,
,
],
);
,