echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。

文章目录

echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。
- 配置上下椭圆
- 配置柱状图，和配置每个椭圆的颜色一样，在itemStyle中使用函数动态
- NO.排名lble配置
- 柱状图顶部配置，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],

设置坐标轴不可见

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,},},

配置上下椭圆

// 下部椭圆
{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],},]);
},

因为每个柱状图的颜色不一样，并且有渐变色。所以在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);},},},
},

现在将所有配置整理一下，变为如下所示

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);

现在图形有了，现在就是让图形顶部的字儿和图形对应起来。

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);},},},
},

柱状图顶部配置，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"),},},},},},
},

这里需要注意的是背景图需要使用require引入，不然会出现找不到的情况，也可以将图片存在public目录的img文件夹下，可以不使用require引入

echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。相关推荐

echarts 柱状图【立体】
官网链接 echarts 柱状图上面显示文字 label series: [{name: 'a',tooltip: {show: false,},data: this.data,type: 'bar' ...
echarts （二）之canvas设置地图背景图
实现效果如下: echarts效果实现参考:echarts地图连线动效之(一) 接下来说这个背景图是如何利用canvas实现的: 首先在初始化echarts后增加下面代码: `` var chart ...
echarts柱状图实现正负值不同颜色在上方显示数值
效果如图: 核心代码: series: [{type: "bar",barMaxWidth: 25,data: this.YList.map((item) => {// 循环 ...
Echarts柱状图3d立体效果
import * as echarts from "echarts";//引用echarts import { onMounted } from "vue";/ ...
Echarts 矩形树图使用心得（渐变色、背景图等）
文章目录前言一.矩形树图二.需求描述三.使用 1.引入echarts.js 2.初始化及数据结构 3.具体配置总结参考前言因业务需求需要一个比较炫酷的矩形树图,由于是第一次用,感觉收获 ...
解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
前端vue显示柱状图_Vue—Echarts 柱状图
使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例. ee05abaf9633184a9c012631b642d970.png ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离在我们绘制图标的时候,有时 y 轴单位标题的位置距离图标太近,影响美观,如图所示: 我们想把元离图表远一些,怎么操作? option = ...

echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。

echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。

文章目录

配置上下椭圆

配置柱状图，和配置每个椭圆的颜色一样，在itemStyle中使用函数动态

NO.排名lble配置

柱状图顶部配置，lable背景图

echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。相关推荐

最新文章

热门文章