echarts 立体柱状图(多个柱状图)

1.引入echarts.min.js(版本过低会出现一些让人头疼的报错)

https://cdn.bootcss.com/echarts/5.3.0/echarts.min.js

附上效果图及代码:

getEchart() {var chartDom = document.getElementById('echartsBox');var myChart = echarts.init(chartDom);var option;const sideData = [220, 182, 191, 234, 290, 330]const sideData1 = [100, 110, 120, 134, 190, 230]option = {tooltip: {trigger: 'axis'},legend: {data: [{name: "去年人数",textStyle: {color: 'white'}},{name: "今年人数",textStyle: {color: 'white'}}]},grid: {top: '10%',bottom: '62%',right: '15%',containLabel: true},toolbox: {show: true,},calculable: true,xAxis: [{type: 'category',splitLine: {show: false},data: ['三月', '四月', '五月', '六月', '七月', '八月'],axisLabel: {show: true,textStyle: {color: "#fff" //X轴文字颜色},},}],yAxis: [{type: 'value',splitLine: {show: false},axisLabel: {show: true,textStyle: {color: "#fff" //X轴文字颜色},},}],series: [{name: '去年人数',tooltip: {show: false},type: 'bar',barWidth: 10,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#2d8cf0" // 0% 处的颜色}, {offset: 0.6,color: "#2d8cf0" // 60% 处的颜色}, {offset: 1,color: "#2d8cf0" // 100% 处的颜色}], false)}},data: sideData,barGap: 0,}, {name: '去年人数',type: 'bar',barWidth: 10,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#09337C" // 0% 处的颜色}, {offset: 0.6,color: "#0761C0" // 60% 处的颜色}, {offset: 1,color: "#0575DE" // 100% 处的颜色}], false)}},barGap: 0,data: sideData,label: {show: true,position: 'top',textStyle: {color: 'white',fontSize: 10}}}, {name: '去年人数',tooltip: {show: false},type: 'pictorialBar',itemStyle: {borderWidth: 1,borderColor: '#0571D5',color: '#288ef3' // 控制顶部方形的颜色},symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',symbolSize: ['20', '7'], // 第一个值控制顶部方形大小symbolOffset: ['-10', '-4'], // 控制顶部放行 左右和上下symbolRotate: -16,symbolPosition: 'end',data: sideData,z: 3,},{name: '今年人数',tooltip: {show: false},type: 'bar',barWidth: 10,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#15a00f" // 0% 处的颜色}, {offset: 0.6,color: "#11ad0a" // 60% 处的颜色}, {offset: 1,color: "#19c213" // 100% 处的颜色}], false)}},data: sideData1,barGap: 0,}, {name: '今年人数',type: 'bar',barWidth: 10,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#26ec10" // 0% 处的颜色}, {offset: 0.6,color: "#26ec10" // 60% 处的颜色}, {offset: 1,color: "#26ec10" // 100% 处的颜色}], false)}},barGap: 0,data: sideData1,label: {show: true,position: 'top',textStyle: {color: 'white',fontSize: 10}}}, {name: '今年人数',tooltip: {show: false},type: 'pictorialBar',itemStyle: {borderWidth: 1,borderColor: '#fff',color: '#26ec10' // 顶部方块的颜色},symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',symbolSize: ['20', '7'], // 第一个值控制顶部方形大小symbolOffset: ['10', '-4'], // 控制顶部放行 左右和上下symbolRotate: -16,symbolPosition: 'end',data: sideData1,z: 3,}]};myChart.setOption(option, true);},

echarts 立体柱状图(多个柱状图)相关推荐

echarts画出特殊形状的柱状图
通常echarts画出的柱状图都是矩形,怎样用echarts画出特殊形状的柱状图呢? 例如: 代码配置参数如下: option = { xAxis: { type: 'cate ...
echarts柱状图渐变堆叠柱状图渐变小程序 vue
echarts堆叠柱状图渐变官网实例堆叠柱状图堆叠渐变柱状图 import * as echarts from '../../ec-canvas/echarts'; //微信小程序需引用,其他正 ...
Echarts定制化组件展示网站（包括3d饼环图，3d柱状图，三维柱状图，水滴图）
Echarts官方的定制化组件展示网站makeapie.com已经关闭了,上面有许多定制的组件作品. 比如3d饼环图,3d柱状图,三维柱状图,水滴图等等. 找到了可替代的chartsdev.c ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
echarts圆柱形柱状图源码_jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】...
jQuery插件echarts实现的多柱子柱状图效果示例[附demo源码下载] 发布时间:2020-09-08 07:46:02 来源:脚本之家阅读:74 作者:翱翔天地本文实例讲述了jQuery ...
01 【eCharts样式定制系列】柱状图修改柱状颜色、柱状形状等
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.接下来我们先对 ...
vue3中，echarts使用（一）——柱状图和折线图的结合使用
vue3中,echarts使用(一)--柱状图和折线图的结合使用官网:https://echarts.apache.org/zh/index.html 官网示例:https://echarts.ap ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码
柱状图、堆叠柱状图、瀑布图有什么区别？怎样用Python绘制？（附代码）
来源:大数据DT(ID:hzdashuju) 作者:屈希峰,资深Python工程师,知乎多个专栏作者本文约8000字,建议阅读20分钟柱状图是当前应用最广泛的图表之一,你几乎每天都可以在电子产品上 ...
柱状图、堆叠柱状图、瀑布图有什么区别？怎样用Python绘制？
导读:柱状图是当前应用最广泛的图表之一,你几乎每天都可以在电子产品上看到它.它有哪些分类?可以展示哪些数据关系?怎样用Python绘制?本文带你逐一了解. 作者:屈希峰,资深Python工程师,知乎多 ...

echarts 立体柱状图(多个柱状图)

echarts 立体柱状图(多个柱状图)相关推荐

最新文章

热门文章