在vue中需要用到折线图,且有区域渐变色的效果,那么像下面那样子直接复制过来,在vue中不能渲染出来。
需要将原来的 new echarts.graphic.LinearGradient 改成这样,new this.$echarts.graphic.LinearGradient
报错
错误代码
//自定义环形图颜色
color: [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#4494F5" },
{ offset: 1, color: "#08DDF2 " }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "#08DDF280" },
{ offset: 0, color: "#3D9CF580" },
]),
],
修改后
color: [
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#4494F5" },
{ offset: 1, color: "#08DDF2 " }
]),
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "#08DDF280" },
{ offset: 0, color: "#3D9CF580" },
]),
], //自定义环形图颜色
正确展示
完整步骤
前提先是npm安装echart
1、使用npm安装
npm install echarts --save
2、main.js中引入挂载原型
import echarts from 'echarts'
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts
3、记得要设置宽高-
<div :class="className" :style="{ height: height, width: width }" ref="Echart" />
initChart() {
// 创建 echarts 实例。
var myChartOne = this.$echarts.init(this.$refs.Echart);
myChartOne.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
tooltip: {
trigger: "item",
},
//自定义环形图颜色
color: [
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#4494F5" },
{ offset: 1, color: "#08DDF2 " }
]),
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "#08DDF280" },
{ offset: 0, color: "#3D9CF580" },
]),
],
series: [
{
type: 'pie',
radius: ['25%', '40%'],
center: ['50%', '70%'],
startAngle: 180,
label: {
show: false,
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{
value: 1048 + 735,
itemStyle: {
color: 'none',
decal: {
symbol: 'none'
}
},
label: {
show: false
}
}
]
}
]
});
},
mounted () {
this.initChart()
},