在series中的itemStyle中定义隔柱换色
series: [
{
data: [
670, 590, 630, 531, 478, 578, 378, 562, 348, 473,
347, 643, 347, 458, 528, 584, 482, 600, 473, 450,
375, 210, 610, 450, 580, 458, 597, 384, 297, 310,
328, 380,
],
type: "bar",
itemStyle: {
normal: {
barBorderRadius: 0,
label: {
show: true,
position: "top",
color: "#4d4d4d",
},
// 将函数粘贴至此处-隔柱换色
color: function (params) {
// 定义换色数组
var colorList = ["#5470c6", "#91cc75"];
if (params.dataIndex % 2 == 0) {
return colorList[0];
} else {
return colorList[1];
}
},
},
},
},
],
各省数据图,完整代码:
<template>
<div>
<div style="width: 100%; height: 500px" id="ProvinceChart"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
name: "ProvinceChart",
props: {},
components: {},
data() {
return {
option: {
title: {
text: "各省数据图",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
data: [
"北京市",
"重庆市",
"上海市",
"天津市",
"河北省",
"山东省",
"辽宁省",
"黑龙江省",
"甘肃省",
"吉林省",
"青海省",
"河南省",
"江苏省",
"湖北省",
"湖南省",
"浙江省",
"江西省",
"广东省",
"云南省",
"福建省",
"台湾省",
"海南省",
"山西省",
"四川省",
"陕西省",
"贵州省",
"安徽省",
"内蒙古自治区",
"广西壮族自治区",
"西藏自治区",
"新疆维吾尔自治区",
"宁夏回族自治区",
],
axisTick: {
alignWithLabel: true,
},
axisLabel: { interval: 0, rotate: 30 },
},
yAxis: {
type: "value",
},
series: [
{
data: [
670, 590, 630, 531, 478, 578, 378, 562, 348, 473,
347, 643, 347, 458, 528, 584, 482, 600, 473, 450,
375, 210, 610, 450, 580, 458, 597, 384, 297, 310,
328, 380,
],
type: "bar",
itemStyle: {
normal: {
barBorderRadius: 0,
label: {
show: true,
position: "top",
color: "#4d4d4d",
},
// 将函数粘贴至此处
color: function (params) {
// 定义换色数组
var colorList = ["#5470c6", "#91cc75"];
if (params.dataIndex % 2 == 0) {
return colorList[0];
} else {
return colorList[1];
}
},
},
},
},
],
},
};
},
methods: {},
mounted() {
let chartDom = document.getElementById("ProvinceChart");
let myChart = echarts.init(chartDom);
myChart.setOption(this.option);
},
watch: {},
computed: {},
filters: {},
};
</script>
<style lang="scss" scoped></style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。