echarts实现立体柱状图

效果图：
代码：写的比较着急，有些地方没有改，记录一下

    initChart2(dom) {const myChart = echarts.init(dom)var xData2 = ['容城谷庄']var data1 = [50]myChart.setOption({backgroundColor: 'rgba(0,0,0,0)',grid: {left: 0,bottom: 15,top: 15,right: 80},xAxis: {data: xData2,axisTick: {show: false},axisLine: {show: false},axisLabel: {show: false}},yAxis: {splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},axisLabel: {// textStyle: {//     color: '#fff',//     fontSize: 20,// },// 不显示Y轴数值formatter: function() {return ''}}},series: [// 数据低下的圆片{name: '',type: 'pictorialBar',symbolSize: [41, 15],symbolOffset: [0, 8],z: 12,symbol: 'diamond',itemStyle: {opacity: 1,color: function(params) {return new echarts.graphic.LinearGradient(1,// 深色#2BA9ED 浅色 #34EDF20,0,0,[{offset: 0,color: '#E1DC53' // 0% 处的颜色},{offset: 1,color: '#E1DC53' // 100% 处的颜色}],false)}// color: 'transparent'},data: [1]},// 数据的柱状图{name: '',type: 'bar',barWidth: 41,itemStyle: {// lenged文本opacity: 1, // 这个是 透明度color: function(params) {return new echarts.graphic.LinearGradient(0,1,0,0,[{offset: 0,color: '#E1DC53' // 0% 处的颜色},{offset: 1,color: '#E8AE62' // 100% 处的颜色}],false)}},data: data1},// 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20{type: 'bar',symbol: 'diamond',barWidth: 43,itemStyle: {color: 'transparent'},data: data1},// 数据顶部的样式{name: '',type: 'pictorialBar',symbol: 'diamond',symbolSize: [41, 15],symbolOffset: [0, -8],z: 12,itemStyle: {normal: {opacity: 1,color: function(params) {return new echarts.graphic.LinearGradient(0,0,1,0,[{offset: 0,color: '#E1DC53' // 0% 处的颜色},{offset: 1,color: '#E8AE62' // 100% 处的颜色}],false)},label: {show: true, // 开启显示position: 'top', // 在上方显示textStyle: {// 数值样式color: '#FFFFFF',fontSize: 20,top: 50},formatter: function(param) {return param.data + '%'}}}},symbolPosition: 'end',data: data1},// 阴影的顶部{name: '', // 头部type: 'pictorialBar',symbol: 'diamond',symbolSize: [41, 15],symbolOffset: [0, -8],z: 12,symbolPosition: 'end',itemStyle: {color: '#064164',opacity: 0.3,borderWidth: 1,borderColor: '#526558'},data: [100]},// 后面的背景{name: '2019',type: 'bar',barWidth: 41,barGap: '-100%',z: 0,itemStyle: {color: '#304047'},data: [100]}]})},getChart() {this.popShow = !this.popShow},async changeEcharts() {await this.getChart()setTimeout(() => {document.querySelectorAll('.chart1_chart').forEach(dom => {this.initChart1(dom)})}, 0)setTimeout(() => {document.querySelectorAll('.chart2_chart').forEach(dom => {this.initChart2(dom)})}, 0)}

echarts实现立体柱状图相关推荐

Echarts 3D立体柱状图(源码+例图)
Echarts 3D立体柱状图,3D长方体柱状图,直接cope源码可用(源码+例图) 废话不多说,直接上代码!!! // HTML 代码 <div id="litiBar" ...
ECharts: 绘制立体柱状图【圆柱体】
绘制这个立体的圆柱体柱状图主要由三块组成: 底部主体顶部实现这种效果主要是: ECharts中的 series 属性,通过两种不同类型的图表组合而成. 其中里面的柱体渐变色是通过 ECharts ...
echarts怎么实现立体柱状图_Vue中使用Echarts实现立体柱状图（长方体）
预览: 代码: 页面部分: CSS部分: .roadnum-all { width: 100%; height: 100%; /*填满父级容器*/ } JS部分: import echarts fro ...
通过Echarts怎样实现立体柱状图
前言大家好,我是梁木由.之前在做大屏可视化项目时,UI设计了一个立体形状的柱状图,根据之前做的一些图表的项目没有能复用的,没有做过这种立体形状的图表,打开echarts也没看到有相关的demo,看下 ...
echarts实现单3D立体柱状图
效果图: 实现代码: function getEcharts3DBar (xAxisData, data, colorType) {var colorArr = [];if (colorType == ...
echarts实现多3D立体柱状图
效果图: 实现代码: // 立体多柱状图 function getSolidOption(data1, data2, data3) {// 月份坐标轴var nowMonth = new Date() ...
echarts立体柱状图，正负极不同颜色的设置
文章目录效果图代码效果图代码 <template><divref="bar_3d"class="echarts":id="i ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
vue 实现立体柱状图
vue实现立体柱状图样式如下图所示: 可以将立体柱状图看做由yData+底+顶构成,对应代码如下: <template><div ref="BarChart" ...
D3.js 绘制立体柱状图
绘制效果图如下: 绘制思路: 将立体柱状图拆分为顶部与侧面,并分别用 path 路径绘制. 拆分后的顶部和侧边的绘制顺序如图所示: // 基础配置const svgObj = { // svg画布大小 ...

echarts实现立体柱状图

echarts实现立体柱状图相关推荐

最新文章

热门文章