功能:进入页面默认最后一个柱条和文字是处于高亮,点击可切换柱条高亮。
参考链接:https://echarts.apache.org/zh/option.html#series-bar.itemStyle.color
**第一步:**从 npm 获取并引用
npm install echarts --save
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts; // 将echarts引入与到vue的原型中,方便使用
**第二步:**基于准备好的dom,初始化echarts实例
<div id="main" style="width: 330px; height: 400px"></div>
var myChart = echarts.init(document.getElementById('main'));
第三步: 绘制图表
data() {
return {
option: [],
data: ['4709.0', '2000.00', '2900.21', '5023.50', '1823.20', '6407.06'],
colorList: [
'#4D92FF',
'#4D92FF',
'#4D92FF',
'#4D92FF',
'#4D92FF',
'#1F73F7',
],
}
},
onExample() {
let that = this
let myChart = this.$echarts.init(document.getElementById('main'))
let index = 5
this.option = {
title: {
text: '',
},
xAxis: {
data: ['11月', '12月', '1月', '2月', '3月', '4月'],
axisLine: {
lineStyle: {
color: '#1F73F7',
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
//x轴文字的配置
show: true,
textStyle: {
color: '#999999',
},
},
},
yAxis: {
show: false, //y轴刻度值不显示
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: '销量',
type: 'bar',
data: this.data,
label: {
normal: {
show: true,
position: 'top',
height: 20,
formatter: (value) => {
// index默认是5,最后一个高亮,在下方点击事件获取index
//货币符需要在formatter配置
var a = '{a|' + '¥' + value.value + '}'
var b = '{b|' + '¥' + value.value + '}'
//a是高亮,b是黑色
var c = value.dataIndex == index ? a : b
return c
},
textStyle: {
rich: {
a: {
color: '#1F73F7',
},
b: {
color: '#999999',
},
},
},
},
},
itemStyle: {
normal: {
//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
color: function (params) {
//colorList定义好每个柱条的颜色
var colorList = that.colorList
return colorList[params.dataIndex]
},
},
},
barCategoryGap: '90%',
barWidth: 30,
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(that.option)
setTimeout(() => {
myChart.setOption(that.option)
}, 100)
//点击柱条事件
myChart.on('click', function (params) {
index = params.dataIndex
//循环柱条
that.colorList.forEach((i, v) => {
that.colorList[v] = '#4D92FF'
that.colorList[params.dataIndex] = '#1F73F7' //点击时改变当前柱子的颜色
myChart.setOption(that.option)
})
})
},