echarts，不同颜色，立体，lable不同颜色，lable有背景图。
文章目录
序言：笔记记录，定制化开发下图实现方法。使用技术vue2+echarts@4.5, echarts定制化开发已经全局引入
实现路径
- 定制化开发设置坐标轴不显示
- 配置series，使用echarts定制化开发提供的象形柱图（pictorialBar）定制化开发画出上下椭圆。使用柱状图画出柱体。
- 配置上部椭圆的lable，柱体的lable。
代码实现
//数据形式//上下椭圆topPicList: [ { value: 20, label: { color: "rgba(21, 100, 232, 1)" } }, { value: 40, label: { color: "rgba(21, 100, 232, 1)" } }, { value: 30, label: { color: "rgba(6, 210, 141, 1)" } }, { value: 80, label: { color: "rgba(251, 177, 0, 1)" } }, { value: 60, label: { color: "rgba(0, 255, 255, 1)" } }, ],//柱状图barList: [ { value: 20, name: "纺织类", percentage: "4.9%", }, { value: 40, name: "农产品", percentage: "5.8%", }, { value: 30, name: "生活用品", percentage: "10.72%", }, { value: 80, name: "化纤类", percentage: "14.33%", }, { value: 60, name: "纺织类", percentage: "64.21%", }, ], dataList: [20, 40, 30, 80, 60],- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
设置坐标轴不可见
let option = { grid: { top: "30%", left: "10%", right: "4%", bottom: "14%", containLabel: false, }, //grid用于设置图形位置。 xAxis: { data: ["2012", "2014", "2018", "2020", "2022"], axisTick: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, textStyle: { color: "#e54035", }, }, }, yAxis: { splitLine: { show: false, }, axisTick: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, }, },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
配置上下椭圆
// 下部椭圆 { name: "", type: "pictorialBar", symbolSize: [30, 10], //宽高 symbolOffset: [0, 6], //偏移 // "barWidth": "20", z: 12, data: this.dataList, itemStyle: { normal: { color: (params) => { return this.linearFn(params); }, }, },}, // 上部椭圆 { name: "", type: "pictorialBar", symbolSize: [30, 10], symbolOffset: [0, 6], // "barWidth": "20", z: 12, data: this.dataList, itemStyle: { normal: { color: (params) => { return this.linearFn(params); }, }, },}, //methods中的方法linearFn(params) { //不同柱子上椭圆的颜色数组。 let ColorList = [ ["rgba(63, 168, 242, 1)", "rgba(21, 100, 232, 1)"], ["rgba(63, 168, 242, 1)", "rgba(21, 100, 232, 1)"], ["rgba(163, 255, 224, 1)", "rgba(6, 210, 141, 1)"], ["rgba(255, 230, 170, 1)", "rgba(251, 177, 0, 1)"], ["rgba(0, 255, 255, 1)", "rgba(0, 255, 255, 1)"], ]; let index = params.dataIndex; //椭圆颜色渐变， return new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: ColorList[index][0], }, { offset: 1, color: ColorList[index][1], }, ]);},- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
因为每个柱状图的颜色不一样，并且有。所以在itemStyle中配置。
在这里需要注意的是，这里使用this.4echarts会报错，需要重新引入echarts。 import * as echarts from “echarts”;
我想大概是this的原因吧，但是我将this输出后没有看出来哪里有什么不同，哪位大佬知道可以指点一二。
配置柱状图，和配置每个椭圆的颜色一样，在itemStyle中使用函数动态
{ type: "bar", //silent: true, barWidth: "30", data: this.barList, itemStyle: { normal: { color: (params) => { return this.radialFn(params); }, }, },},- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
现在将所有配置整理一下，变为如下所示
let option = { grid: { top: "30%", left: "10%", right: "4%", bottom: "14%", containLabel: false, }, xAxis: { data: ["2012", "2014", "2018", "2020", "2022"], axisTick: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, textStyle: { color: "#e54035", }, }, }, yAxis: { splitLine: { show: false, }, axisTick: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, }, }, series: [ { name: "", type: "pictorialBar", symbolSize: [30, 10], symbolOffset: [0, -6], // 上部椭圆 symbolPosition: "end", z: 12, // "barWidth": "0", data: this.topPicList, itemStyle: { normal: { color: (params) => { return this.linearFn(params); }, }, }, }, { name: "", type: "pictorialBar", symbolSize: [30, 10], symbolOffset: [0, 6], // 下部椭圆 // "barWidth": "20", z: 12, data: this.dataList, itemStyle: { normal: { color: (params) => { return this.linearFn(params); }, }, }, }, { type: "bar", //silent: true, barWidth: "30", data: this.barList, itemStyle: { normal: { color: (params) => { return this.radialFn(params); }, }, }, }, ],};//获取元素this.myChart = this.$echarts.init(this.$refs.myechart);//绘图this.myChart.setOption(option);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
现在图形有了，现在就是让图形顶部的字儿和图形对应起来。
NO.排名lble配置
这里我选择配置在上部椭圆顶部
{ name: "", type: "pictorialBar", symbolSize: [30, 10], symbolOffset: [0, -6], // 上部椭圆 symbolPosition: "end", z: 12, label: { normal: { show: true, position: "top", //在顶部显示 fontSize: 16, fontWeight: "bold", formatter: (params) => { //去重，排序，这里去重的目的是防止排名混乱 let list = Array.from( new Set(this.dataList.sort((a, b) => b - a)) ); let index = list.findIndex((item) => item === params.value) + 1; return `NO.${index}`; }, }, }, data: this.topPicList, itemStyle: { normal: { color: (params) => { return this.linearFn(params); }, }, },},- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
柱状图顶部配置，lable背景图
{ type: "bar", //silent: true, barWidth: "30", data: this.barList, itemStyle: { normal: { color: (params) => { return this.radialFn(params); }, }, }, label: { normal: { show: true, position: "top", distance: 35, align: "center", // backgroundColor: "inherit", // padding: [3, 10, 10, 5], formatter: (params) => { if (params.name === "纺织类") { return [`{bg1|${params.name} ${params.data.percentage}}`]; } else if (params.name === "农产品") { return [`{bg2|${params.name} ${params.data.percentage}}`]; } else if (params.name === "生活用品") { return [`{bg3|${params.name} ${params.data.percentage}}`]; } else if (params.name === "化纤类") { return [`{bg4|${params.name} ${params.data.percentage}}`]; } else { return [`{bg5|${params.name} ${params.data.percentage}}`]; } }, rich: { bg1: { color: "#fff", fontSize: 12, height: 22, lineHeight: 20, backgroundColor: { image: require("@/views/dataanalysis/listOfTopics/economic/images/light5.d.png"), }, }, bg2: { color: "#fff", fontSize: 12, height: 22, lineHeight: 20, backgroundColor: { image: require("@/views/dataanalysis/listOfTopics/economic/images/light4.d.png"), }, }, bg3: { color: "#fff", fontSize: 12, height: 22, lineHeight: 20, backgroundColor: { image: require("@/views/dataanalysis/listOfTopics/economic/images/light3.d.png"), }, }, bg4: { color: "#fff", fontSize: 12, height: 22, lineHeight: 20, backgroundColor: { image: require("@/views/dataanalysis/listOfTopics/economic/images/light2.d.png"), }, }, bg5: { color: "#fff", fontSize: 12, height: 22, lineHeight: 20, backgroundColor: { image: require("@/views/dataanalysis/listOfTopics/economic/images/light1.d.png"), }, }, }, }, },},- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
这里需要注意的是背景图需要使用require引入，不然会出现找不到的情况，也可以将图片存在public目录的img文件夹下，可以不使用require引入