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

Space Chars2024-05-01 9:12

立体柱状图分为：

  1. 纯色立体柱状图
  2. 渐变立体柱状图

常用实现方式

纯色立体柱状图

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

js 复制代码 
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图片地址）

js 复制代码 
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特有的绘制方式

js 复制代码 
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);
相关推荐
晴空万里藏片云7 分钟前
elment Table多级表头固定列后，合计行错位显示问题解决
前端·javascript·vue.js
曦月合一7 分钟前
html中iframe标签 隐藏滚动条
前端·html·iframe
奶球不是球9 分钟前
el-button按钮的loading状态设置
前端·javascript
kidding72313 分钟前
前端VUE3的面试题
前端·typescript·compositionapi·fragment·teleport·suspense
Σίσυφος19002 小时前
halcon 条形码、二维码识别、opencv识别
前端·数据库
学代码的小前端2 小时前
0基础学前端-----CSS DAY13
前端·css
css趣多多3 小时前
案例自定义tabBar
前端
姑苏洛言5 小时前
DeepSeek写微信转盘小程序需求文档，这不比产品经理强？
前端
林的快手5 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
匹马夕阳5 小时前
ECharts极简入门
前端·信息可视化·echarts
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek RAGFlow构建本地知识库系统08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10【docker】Windows10安装Docker Desktop - WSL update failed