主要代码
normal: {
color: function(params) {
var colorList = [
{
c1: ' #fce5ca', //管理
c2: '#FF9D62'
},
{
c1: ' #508DFF', //实践
c2: '#26C5FE'
},
{
c1: '#63E587',//操作
c2: '#5FE2E4'
}]
return new that.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
}, {
offset: 1,
color: colorList[params.dataIndex].c2
}])
}
}
完整代码
<template>
<div>
<div id="myChart" :style="{width: '200px', height: '3200px'}"></div>
</div>
</template>
<script>
import Vue from "vue";
export default {
name: "component",
data() {
return {};
},
mounted() {
this.drawChart();
},
methods: {
//图表
drawChart() {
let that=this;
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: {},
series: [
{
name: "demo",
type: "pie",
radius: "55%",
center: ["40%", "50%"],
data: [
{ value: 1, name: "苹果" },
{ value:2, name: "香蕉" },
{ value: 3, name: "橘子" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
},
normal: {
color: function(params) {
//渐变色列表,自定义自己需要的颜色
var colorList = [
{
c1: "#5eae72",
c2: "#5391f1"
}, {
c1: " #f00",
c2: "#fff"
},{
c1: "#fea10f",
c2: "#fa8013"
}
];
return new that.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
},{
offset: 1,
color: colorList[params.dataIndex].c2
}
]);
}
}
}
}
]
});
}
}
};
</script>