在vue中使用echarts5.3.0

//定义echarts实例对象this.barCharts=this.$echarts.init(document.getElementById("bar"))//示例this.barCharts.showLoading(this.chartsLoadingStyle)//加载显示，定义样式//这里可以是请求交互，获取option需要的数据this.barCharts.setOption(option)this.barCharts.hideLoading()//隐藏加载6.看一下各个option的配置chart//columnFigurebarOption={color:['#3398DB'],//系列调色板，颜色列表title:{//图形标题text:title,textStyle:{fontSize:14},left:25,//componentawayfromthecontainerLeftpixelvaluetop:0,},tooltip:{//提示trigger:'axis',//触发类型项数据项触发axis坐标axistriggersaxisPointer:{//指标配置项type:'shadow'//linelineindicatorshadowshadowindicator}},grid:{//网格设置//left:"9%",//默认为10%},toolbox:{//toolboxshow:true,feature:{//要显示的工具，除了内置的工具，还可以自定义dataView:{//DataviewreadOnly:true},magicType:{//类型切换type:["line","bar"]},restore:{},//restoresaveAsImage:{}//另存为图片，默认type=png}},xAxis:{//x轴type:'category',//类别分类轴值：数字轴时间：timeaxislog:logarithmicaxisboundaryGap:true,//true标签和数据会在刻度线中间，false:标签和数据会在刻度线上data:category,//分类轴数据splitLine:{show:false//网格区域坐标轴的分界线默认显示},axisLabel:{//类别轴标签的斜率和格式formatter:function(value){letrst=valueif(value.length>5){rst=value.substring(0,5)+"..."}returnrst}},},yAxis:{//y轴type:'value',axisLine:{//value坐标轴坐标轴设置show:true,},axisTick:{//value坐标轴刻度设置show:true}},series:[{//系列名:this.typeMapping[this.cond.event_type]+'quantity',//系列名，tooltip的显示类型，legend:"bar",barWidth:30,data:data}]}//饼图选项={title:{text:title,textStyle:{fontSize:14},left:25,//组件从容器左侧开始的像素值top:0,},tooltip:{trigger:'item',formatter:function(params,ticket,callback){变量名='';for(vari=0;i0&&i%20==0){name+='
'}}returnparams['seriesName']+'
'+name+':'+params['value']+'('+params['percent']+'%)'},},legend:{//图例orient:'vertical',data:category,left:'62%',t操作：“10%”，格式化程序：函数（值）{varrs=value;if(value.length>25){rs=value.substring(0,25)+'...'}returnrs}},series:[{//系列名称：this.typeMapping[this.cond.event_type]+'quantity',//系列名称type:"pie",top:'5%',radius:'50%',//饼图中心半径:['35%','50%'],//中心点到x轴、y轴的距离data:data,minAngle:1,//最小扇形的大小，防止值为0扇形效果看不到label:{//图形上的标签文本显示:true,formatter:function(param){varrs=param['name'];如果（rs.length>15){rs=rs.substring(0,14)+'...'}returnrs},},}],}//热图选项={color:['#3398DB'],title:{text:this.typeMapping[this.cond.event_type]+'datageographicdistribution',textStyle:{fontSize:14},left:25,//组件从容器左侧开始的像素值top:0,},tooltip:{trigger:'item'},grid:{top:0,bottom:0},visualMap:{//可视化地图组件，相当于echarts4中的dataRange，主要是设置地图的可视化效果，比如颜色颜色，定义图元本身的视觉和目标系列的视觉type:'continuous',//continuous:continuous'piecewise':segmentedtypeleft:'15%',//距图元左侧的距离到直角坐标系top:'60%',min:0,//图元的最大值和最小值max:max,text:['high','low'],calculable:true,//是否为实时显示拖拽句柄:false,//拖拽过程中是否实时更新inRange:{//将图元颜色和目标系列颜色从'#DDFDFE'改为'#006EDD',逐渐加深颜色:['#DDFDFE','#006EDD'],//symbolSize:[60,200]//是图元大小}//splitNumber:8//段数，在type=中有效piecewise，默认值为5},series:[{name:this.typeMapping[this.cond.event_type]+'datageographicdistribution',type:'map',map:"china",//roam:'scale',//开启鼠标缩放selectedMode:'multiple',//选中模式，表示是否支持多选label:{show:true},//地图上的标签是否显示data:data,}],//animation:false//是否启用动画}