问题描述
假设有这样一个需求:使用柱状图横轴不确定,可能有三个、五个、十个八个柱状图,但是颜色就只有三种,不管有多少种,都是循环使用这三种颜色。我们先看一下,最终的效果图
效果图
当我们点击按钮,重新绘制echarts的时候,依然是三种颜色循环使用。
使用步骤
第一步 下载并使用echarts插件
npm下载npm install echarts --save
在main.js中引入并原型上挂载import echarts from 'echarts'
Vue.prototype.$echarts = echarts
第二步 组件中使用
<template>
<div>
<div class="echartsBox" id="main"></div>
<el-button size="small" type="primary" @click="change">改变数据表</el-button>
</div>
</template>
<script>
export default {
data() {
return {
xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
yData: [115, 198, 88, 77, 99, 123, 176],
grid: {
// 网格线配置
show: true,
lineStyle: {
color: ["#e9e9e9"],
width: 1,
type: "solid",
},
},
};
},
watch: {
xData() {
this.echartsInit();
},
yData() {
this.echartsInit();
},
},
mounted() {
// 在通过mounted调用让echarts渲染
this.echartsInit();
},
methods: {
echartsInit() {
let main = document.getElementById("main"); // 获取dom元素作为eacharts的容器
this.$echarts.init(main).setOption({ // 调用echarts方法去绘制echarts图
xAxis: {
type: "category", // 类别
data: this.xData, // x轴类别对应的值
splitLine: this.grid, // 给x轴加上网格线
},
yAxis: {
type: "value",
splitLine: this.grid, // 给y轴加上网格线
},
series: [
{
data: this.yData,
type: "bar", // 类型为柱状图
barWidth: 40, // 柱状图的宽度
itemStyle: {
normal: {
barBorderRadius: [20, 20, 0, 0], // 加圆角 对应(顺时针左上,右上,右下,左下)
// 这里的color指的是每个颜色的回调函数
color: function (params) {
console.log("颜色参数", params); //这里我们有七个柱状图,七份数据,所以会打印7次。
// params.dataIndex指的是每个柱状图的索引下标 分别为0 1 2 3 4 5 6 7 8 9
var colorArr = ["#baf", "#bfa", "#cde"]; //colorArr.length 为3,通过取模的方式就可以循环使用颜色了
return colorArr[params.dataIndex % colorArr.length];
},
},
},
},
],
});
},
change() {
// 在点击事件中,直接修改data是能修改成功,但是页面不会有变化,因为数据是改变了,但是
// canvas画图还是原来的图,所以要监听数据,数据变化,就重新执行一次画图的方法就出效果了
this.xData = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
this.yData = [55, 66, 77, 88];
},
},
};
</script>
重点是echartsInit()-->series-->itemStyle-->normal-->color的函数的逻辑写法,灵活使用可以实现很多好看的效果,虽然官网给的效果图有点丑,当然具体的一些强大的配置项,还是要去官网去看api文档。官方传送门附上:https://echarts.apache.org/zh...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。