立体柱状图

1、首先通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
</html>

2、然后准备一个具备高宽的 DOM 容器。

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

3、通过 echarts.init 方法初始化 echarts 实例并通过 setOption 方法生成立体壮壮图，下面是完整代码。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./echarts.min.js"></script>
</head><body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));console.log(myChart)//图形路径const symbols = ["path://M66.1,35.7L100,49.8v128.7l-33.9-12.7L66.1,35.7z", //左边"path://M133.9,35.7L100,49.8v128.7l33.9-12.7V35.7z", //右边"path://M66.1,35.7L100,21.5l33.9,14.1L100,49.8L66.1,35.7z", //菱形]//源数据const data = [{label: "治安",value: 600}, {label: "交通",value: 400}, {label: "人脸",value: 500}]//数据最大值（需要结合源数据取最大值过程不在此编写，可使用lodash）const maxData = 1000;//横坐标数值const xAxisData = data.map((e) => {return e.label})//图形颜色const colorList = ["#5f55ed59", "#f8954359", "#47d69d59"]//图形边框颜色const borderColorList = ["#5f55ed", "#f89543", "#47d69d"]//图形顶部颜色const colorTopList = ["#5571f659", "#f1d57759", "#3fdfc159"]//图形顶部框颜色 const colorBorderTopList = ["#5f55ed", "#fd7d3d", "#25cd75"]//图形底部颜色const colorBottomList = ["#437ffa", "#fee266", "#35c9c7"]//图形实体顶部颜色const topColorList = ["#5571f6", "#f1d577", "#3fdfc1"]//图形柱体颜色const barColorList = ["#7148ea", "#fd7d3d", "#25cd75"]//左右框数值const leftAndRightData = []//顶部框数值const topBorderData = []//底部框数值const bottomBorderData = []//顶部实体数值const topData = []//图形柱体数值const barData = []for (var i = 0; i < data.length; i++) {leftAndRightData.push({name: data[i].label,value: maxData,itemStyle: {color: colorList[i],borderColor: borderColorList[i]}})topBorderData.push({name: data[i].label,value: maxData,symbolPosition: "end",itemStyle: {color: colorTopList[i],borderColor: colorBorderTopList[i]}})bottomBorderData.push({name: data[i].label,value: maxData,itemStyle: {color: colorBottomList[i]}})topData.push({name: data[i].label,value: data[i].value,symbolPosition: "end",itemStyle: {color: topColorList[i]}})barData.push({name: data[i].label,value: data[i].value,label: {show: true,position: "bottom",distance: 60,color: barColorList[i],fontSize: 40},itemStyle: {color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: barColorList[i]}, {offset: 1,color: colorBottomList[i]}])}})}// 指定图表的配置项和数据var option = {backgroundColor: "#020C33",xAxis: [{data: xAxisData,axisTick: {show: false},axisLine: {show: false},axisLabel: {show: true,margin: 30,fontSize: 20,color: "#707FB3"}}],yAxis: {splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},axisLabel: {show: false}},grid: {show: false,height: 200},series: [{name: "左边",type: "pictorialBar",symbolSize: ["50%", "100%"],symbolOffset: [-25, 0],barWidth: 100,silent: true,z: 12,symbol: symbols[0],data: leftAndRightData},{name: "右边",type: "pictorialBar",symbolSize: ["50%", "100%"],symbolOffset: [-75, 0],barWidth: 100,silent: true,z: 12,symbol: symbols[1],data: leftAndRightData},// //菱形顶部框{name: "顶部",type: "pictorialBar",symbolSize: [100, 40],symbolOffset: [0, 0],silent: true,symbol: symbols[2],data: topBorderData},// // //菱形底部实体{"name": "实体","type": "pictorialBar",symbolSize: [101, 38],symbolOffset: [0, 20],silent: true,"z": 12,symbol: symbols[2],"data": bottomBorderData},// // //菱形顶部实体{"name": "","type": "pictorialBar",symbolSize: [99, 45],symbolOffset: [0, -23],"z": 16,silent: true,symbol: symbols[2],"data": topData,animationDuration: 1000,animationDelay: function (idx) {// 越往后的数据延迟越大return idx * 500;}},// // //柱形实体{"type": "bar","silent": true,"barWidth": 100,"barGap": "-100%",z: 13,"data": barData,animationDuration: 1000,animationDelay: function (idx) {// 越往后的数据延迟越大return idx * 500;}}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body></html>