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

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

这篇文章主要介绍了vue+echarts怎么实现3D柱形图的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue+echarts怎么实现3D柱形图文章都会有所收获，下面我们一起来看看吧。

效果如下：

1、安装echarts

npminstallecharts--save

2、引入echarts

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

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

<divid="echarts_park"></div>//图表的容器必须指定宽高#echarts_park{width:400px;height:200px;}

4、渲染图表

mounted(){this.drawPark();},methods:{drawPark(){//初始化echartsletmyChart=this.$echarts.init(document.getElementById("echarts_park"));letnum=["12","12","12","14","12","12","12","14","12","12","12",];letxData=["杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市","杭州市",];varcolors=[{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",},],},];varbarWidth=18;//绘制图表myChart.setOption({tooltip:{trigger:"axis",axisPointer:{//坐标轴指示器，坐标轴触发有效type:"shadow",//默认为直线，可选为：'line'|'shadow'},formatter:function(params){vartipString=params[0].axisValue+"<br/>";varkey="value";params.sort(function(obj1,obj2){varval1=obj1[key];varval2=obj2[key];if(val1<val2){return1;}elseif(val1>val2){return-1;}else{return0;}});varindexColor;for(vari=0,length=params.length;i<length;i++){if(params[i].componentSubType=="bar"){indexColor=params[i+1].color;tipString+='<spanstyle="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:'+indexColor+'"></span>';tipString+='<spandata-type="lineTip"data-val='+params[i].value+">"+params[i].seriesName+"："+params[i].value+"</span><br/>";}}returntipString;},},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柱形图”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue+echarts怎么实现3D柱形图”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道。