【大前端】ECharts 绘制立体柱状图

立体柱状图分为：

纯色立体柱状图
渐变立体柱状图

常用实现方式

纯色立体柱状图

纯色立体柱状图，使用MarkPoint和颜色渐变就实现，如下代码

在这里插入图片描述

import * as echarts from "echarts";var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom, "dark");
var option;const xAxisData = ['A', 'B', 'C', 'D', 'E'];
const yAxisData = [10, 20, 30, 50, 60];const markPointData = [];const barWidth = 30;const linearColor = {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset: 0,color: '#28A9A2' // 0% 处的颜色},{offset: 0.5,color: '#28A9A2' // 0% 处的颜色},{offset: 0.5,color: '#35FFF4' // 0% 处的颜色},{offset: 1,color: '#35FFF4' // 100% 处的颜色}],global: false // 缺省为 false
};yAxisData.forEach((v, i) => {//添加顶部渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: 'path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z', //菱形图标symbolSize: [barWidth, barWidth * 0.5],itemStyle: {color: 'rgba(126, 255, 248,1)'}});// //添加底部渐变markPointData.push({xAxis: xAxisData[i],y: 698,// 到左上角Y轴距离symbol: 'path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z', //菱形图标symbolSize: [barWidth, barWidth * 0.5],symbolOffset: ['0%', '100%'],itemStyle: {color: linearColor}});
});option = {title: {text: '立体柱状图示例'},tooltip: {},xAxis: {data: xAxisData},yAxis: {},series: [{name: '销量',type: 'bar',data: yAxisData,barWidth: barWidth,markPoint: {data: markPointData,silent: true},itemStyle: {borderRadius: [0, 0, 30, 30],color: linearColor}}]
};option && myChart.setOption(option);

SVG

SVG适用于纯色立体柱状图和渐变立体柱状图

ECharts不能直接使用SVG字符串，须要转化为Base64格式的数据（可以使用网络SVG图片地址）

在这里插入图片描述

import * as echarts from "echarts";var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom, "dark");
var option;const xAxisData = ["A", "B", "C", "D", "E"];
const yAxisData = [10, 20, 30, 50, 60];const markPointData = [];const barWidth = 30;const svgStr ='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="105" viewBox="0 0 14 105"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_1_6290"><stop offset="0%" stop-color="#28A9A2" stop-opacity="1"/><stop offset="100%" stop-color="#28A9A2" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_1_6296"><stop offset="0%" stop-color="#35FFF4" stop-opacity="1"/><stop offset="100%" stop-color="#35FFF4" stop-opacity="0"/></linearGradient></defs><g><g><rect x="0" y="0" width="7" height="105" rx="0" fill="url(#master_svg0_1_6290)" fill-opacity="1"/></g><g><rect x="7" y="0" width="7" height="105" rx="0" fill="url(#master_svg1_1_6296)" fill-opacity="1"/></g></g></svg>';
// 转换为Base64格式
const svgDataURL = "data:image/svg+xml;base64," + btoa(svgStr);yAxisData.forEach((v, i) => {//添加顶部渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: "path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z", //菱形图标symbolSize: [barWidth, barWidth * 0.5],itemStyle: {color: "rgba(126, 255, 248,1)"}});
});option = {title: {text: "立体柱状图示例"},tooltip: {},xAxis: {data: xAxisData},yAxis: {},series: [{name: "销量",type: "pictorialBar",data: yAxisData,barWidth: barWidth,markPoint: {data: markPointData,silent: true},symbol:`image://${svgDataURL}`,}]
};option && myChart.setOption(option);

2. MarkPoint

MarkPoint 适用于多组图标组合展示

它和SVG不同的是绘制方式不一样，SVG是互联网通用绘制方式，MarkPoint是ECharts特有的绘制方式

在这里插入图片描述

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;const xAxisData = ['A', 'B', 'C', 'D', 'E'];
const yAxisData = [10, 20, 30, 50, 60];const markPointData = [];const barWidth = 30;// 计算柱状图高度
function computedBarHeight(value, params) {// 左上角 到 Y轴 0 刻度的高度，如果x轴是数值轴，则例使用xAxisIndex标记const zeroHeight = myChart.convertToPixel({ yAxisIndex: 0 }, 0);// 左上角到Y轴目标数值的高度，如果x轴是数值轴，则例使用xAxisIndex标记const height = myChart.convertToPixel({ yAxisIndex: 0 }, params.data.yAxis);// 返回柱状图大小，高度等于0刻度距离-目标数值距离的差值return [barWidth / 2, zeroHeight - height];
}yAxisData.forEach((v, i) => {//添加左侧渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: 'rect',symbolSize: computedBarHeight,symbolOffset: ['-50%', '50%'],itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(40, 169, 162,1)'},{offset: 1,color: 'rgba(40, 169, 162,0)'}],global: false}}});//添加右侧渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: 'rect',symbolSize: computedBarHeight,symbolOffset: ['50%', '50%'],itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(53, 255, 244,1)'},{offset: 1,color: 'rgba(53, 255, 244,0)'}],global: false}}});//添加顶部渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: 'path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z',//菱形图标symbolSize: [barWidth, barWidth * 0.5],itemStyle: {color: 'rgba(126, 255, 248,1)'}});
});option = {title: {text: '立体柱状图示例'},tooltip: {},xAxis: {data: xAxisData},yAxis: {},series: [{name: '销量',type: 'bar',data: yAxisData,barWidth: barWidth,markPoint: {data: markPointData,silent: true},z: 3,itemStyle: {color: 'rgba(255, 53, 64,0)'}}]
};option && myChart.setOption(option);