vue+echarts实现3D柱形图
作者:Cherry☼
这篇文章主要为大家详细介绍了vue+echarts实现3D柱形图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+echarts实现3D柱形图的具体代码,供大家参考,具体内容如下
1、安装echarts
npm install echarts --save
2、引入echarts
import echarts from "echarts"; //修改原型链,可在全局使用 Vue.prototype.$echarts = echarts;
3、创建图表 首先需要在 HTML 中创建图表的容器
<div id="echarts_park"></div> //图表的容器必须指定宽高 #echarts_park { width: 400px; height: 200px; }
4、渲染图表
mounted() { this.drawPark(); }, methods: { drawPark() { //初始化echarts let myChart = this.$echarts.init(document.getElementById("echarts_park")); let num= [ "12", "12", "12", "14", "12", "12", "12", "14", "12", "12", "12", ]; let xData = [ "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", ]; var colors = [ { type: "linear", x: 0, x2: 1, y: 0, y2: 0, colorStops: [ { offset: 0, color: "#0088F1", }, { offset: 1, color: "#00D1FF", }, ], }, { type: "linear", x: 0, x2: 0, y: 0, y2: 1, colorStops: [ { offset: 0, color: "#67D0FF", }, { offset: 1, color: "#3486DA", }, ], }, ]; var barWidth = 18; // 绘制图表 myChart.setOption({ tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, formatter: function (params) { var tipString = params[0].axisValue + "<br />"; var key = "value"; params.sort(function (obj1, obj2) { var val1 = obj1[key]; var val2 = obj2[key]; if (val1 < val2) { return 1; } else if (val1 > val2) { return -1; } else { return 0; } }); var indexColor; for (var i = 0, length = params.length; i < length; i++) { if (params[i].componentSubType == "bar") { indexColor = params[i + 1].color; tipString += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' + indexColor + '"></span>'; tipString += '<span data-type ="lineTip" data-val=' + params[i].value + ">" + params[i].seriesName + ":" + params[i].value + "</span><br />"; } } return tipString; }, }, grid: { left: "3%", right: "3%", bottom: "6%", top: "20%", containLabel: true, }, xAxis: { type: "category", data: xData, offset: 6, axisLine: { lineStyle: { color: " #CCCCCC" } }, axisTick: { alignWithLabel: true, }, axisLabel: { interval: 0, // rotate: 20, textStyle: { color: "#000", fontStyle: "normal", fontFamily: "微软雅黑", fontSize: 13, margin: 10, }, }, }, yAxis: { type: "value", name: "(%)", nameTextStyle: { align: "right", color: "#4D4D4D", }, axisLine: { show: false, lineStyle: { color: "#CCCCCC" }, }, axisTick: { show: false }, splitLine: { show: true, lineStyle: { type: "dashed", color: "#CCCCCC" }, }, axisLabel: { textStyle: { color: "#4D4D4D", fontSize: 14, }, }, }, series: [ { name: "2020", type: "bar", barGap: "14%", barWidth: 18, itemStyle: { normal: { color: colors[1], barBorderRadius: 0, }, }, data: num, }, { z: 2, name: "2020", type: "pictorialBar", data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], symbol: "diamond", symbolOffset: ["0%", "50%"], symbolSize: [barWidth, 10], itemStyle: { normal: { color: colors[1], }, }, }, { z: 3, name: "2020", type: "pictorialBar", symbolPosition: "end", data: qichu, symbol: "diamond", symbolOffset: ["0%", "-50%"], symbolSize: [barWidth, (10 * (barWidth - 1)) / barWidth], itemStyle: { normal: { borderColor: "#67D0FF", borderWidth: 2, color: "#67D0FF", }, }, }, ], }); }, },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。