Vue 炫酷 Echarts 图表

}

}, {

type: ‘CubeTop’,

shape: {

api,

x: location[0],

y: location[1],

xAxisPoint: api.coord([api.value(0), 0])

},

style: {

fill: ‘rgba(72,156,221,.27)’

}

}]

}

},

data: MAX

}, {

type: ‘custom’,

renderItem: (params, api) => {

const location = api.coord([api.value(0), api.value(1)])

var color = api.value(1) > 2000 ? ‘red’ : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: ‘rgba(67,102,243,1)’

},

{

offset: 1,

color: ‘rgba(29,67,243,1)’

}

])

return {

type: ‘group’,

children: [{

type: ‘CubeLeft’,

shape: {

api,

xValue: api.value(0),

yValue: api.value(1),

x: location[0],

y: location[1],

xAxisPoint: api.coord([api.value(0), 0])

},

style: {

fill: color

}

}, {

type: ‘CubeRight’,

shape: {

api,

xValue: api.value(0),

yValue: api.value(1),

x: location[0],

y: location[1],

xAxisPoint: api.coord([api.value(0), 0])

},

style: {

fill: color

}

}, {

type: ‘CubeTop’,

shape: {

api,

xValue: api.value(0),

yValue: api.value(1),

x: location[0],

y: location[1],

xAxisPoint: api.coord([api.value(0), 0])

},

style: {

fill: color

}

}]

}

},

data: VALUE

}, {

type: ‘bar’,

label: {

normal: {

show: true,

position: ‘top’,

fontSize: 16,

color: ‘#fff’,

offset: [2, -25]

}

},

itemStyle: {

color: ‘transparent’

},

tooltip: {

},

data: MAX

}]

}

// 使用刚指定的配置项和数据显示图表。

this.charts.setOption(option);

}

},

}

炫彩饼状图

---

效果

代码

https://www.makeapie.com/editor.html?c=xoqSlmiSRZ

动效仪表盘

---

效果

代码

https://www.makeapie.com/editor.html?c=xoqSlmiSRZ

地图

---

效果

代码

https://www.makeapie.com/editor.html?c=xr5cqmiBBf