vue+echarts实现3D柱形图 vue+echarts实现3D柱形图

本文实例为大家分享了vue+echarts实现3D柱形图的具体代码，供大家参考，具体内容如下

文章图片

1、安装echarts

npm install echarts --save

2、引入echarts

import echarts from "echarts"; //修改原型链,可在全局使用Vue.prototype.$echarts = echarts;

3、创建图表首先需要在 HTML 中创建图表的容器

//图表的容器必须指定宽高#echarts_park {width: 400px; height: 200px; }

4、渲染图表

mounted() {this.drawPark(); },methods: {drawPark() {//初始化echartslet myChart = this.$echarts.init(document.getElementById("echarts_park")); let num= ["12","12","12","14","12","12","12","14","12","12","12",]; let xData = https://www.it610.com/article/["杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市",]; 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 + "
"; 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 +=''; tipString +='" +params[i].seriesName +"：" +params[i].value +"
"; }}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",},},},],}); },},

【vue+echarts实现3D柱形图】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。