记录一下Echarts知识点、例子代码

知识点、例子代码"/>

记录一下Echarts知识点、例子代码

1.知识点

1).Echarts中图例(legend)使用自定义图标legned部分代码：

legend:{show: true,data:[{name:'xxx',icon:"image://图片路径"},],},

注：vue项目中图片必须放在public文件夹下，可以在public下创建一个文件夹存放图片
2).数据X轴名字太长处理方案

1. 倾斜

	xAxis:{axisLabel: {interval:0,//0取消超长隔行显示rotate:30,//倾斜属性},}

2. 设置一行显示几个字，超出换行居中显示

	xAxis:{axisLabel: {formatter:function(params) {let newParamsName = ''; // 最终拼接成的字符串let paramsNameNumber = params.length; // 实际标签的个数let provideNumber = 8; // 每行能显示的字的个数let rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整/*** 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签*/// 条件等同于rowNumber>1if (paramsNameNumber > provideNumber) {/** 循环每一行,p表示行 */for (let p = 0; p < rowNumber; p++) {let tempStr = ''; // 表示每一次截取的字符串let start = p * provideNumber; // 开始截取的位置let end = start + provideNumber; // 结束截取的位置// 此处特殊处理最后一行的索引值if (p === rowNumber - 1) {// 最后一次不换行tempStr = params.substring(start, paramsNameNumber);} else {// 每一次拼接字符串并换行tempStr = params.substring(start, end) + '\n';}newParamsName += tempStr; // 最终拼成的字符串}//超出2行显示...//if(rowNumber>2){//  newParamsName+='...'//}		} else {// 将旧标签的值赋给新标签newParamsName = params;}//将最终的字符串返回return newParamsName}},}

3. 设置显示字数，超出显示…，鼠标移入显示全

2.Echarts例子代码

柱状图1：

import * as echarts from 'echarts'
let option = {grid: {left: "-14%",right: "0%",bottom: "-10%",top: "10%",containLabel: true,//是否包含坐标},// backgroundColor:'red',tooltip: {show: false,trigger: "axis",axisPointer: {type: "none",},formatter: function (params) {console.log(params);},},xAxis: {show: false,type: "value",},yAxis: [{type: "category",inverse: true,axisLabel: {show: true,margin: 100,fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '14px',color: '#FFFFFF',align: 'left'},splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},data: ["结肠息肉", "胃早癌", "结直肠早癌", "食管早癌"],},{type: "category",inverse: true,axisTick: "none",axisLine: "none",show: true,axisLabel: {margin: 35,fontSize: "16",fontFamily: 'DINPro-Regular',fontWeight: '400',fontSize: '16px',color: '#11CABE',letterSpacing: 0,formatter: function (value) {return value+ " %";},},data: [45.17, 27.91, 13.88, 12.19],},],series: [{name: "",type: "bar",zlevel: 1,itemStyle: {borderRadius: 0,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "rgba(17,202,190,0.5)",},{offset: 1,color: "rgba(17,202,190,1)",},]),},barWidth: 4,data: [45.17, 27.91, 13.88, 12.19],},{name: "背景",type: "bar",barWidth: 4,barGap: "-100%",data: [100, 100, 100, 100, 100],itemStyle: {color: "rgba(36,216,249,0.1)",borderRadius: 0,},},],
};

柱状图2：

import * as echarts from 'echarts'
let option = {grid: {left: '2%',right: '6%',top: '35%',bottom: '-1%',containLabel: true},color: [{type: 'linear', x: 0, y: 0, x2: 0, y2: 1,colorStops: [{ offset: 0.2, color: 'rgba(208, 110, 110, 1)' },// 0% 处的颜色{ offset: 1, color: 'rgba(208, 110, 110, 0.5)' },// 100% 处的颜色],global: false // 缺省为 false},{type: 'linear', x: 0, y: 0, x2: 0, y2: 1,colorStops: [{ offset: 0, color: 'rgba(17, 202, 190, 1)' },// 0% 处的颜色{ offset: 1, color: 'rgba(17, 202, 190, 0.5)' },// 100% 处的颜色],global: false // 缺省为 false}],barWidth: 18,tooltip: {trigger: 'axis',axisPointer: {type: 'line',lineStyle: {color: 'rgba(208, 110, 110, 0.2)',type: 'solid',width: 80},},textStyle: {color: "white" //设置文字颜色},extraCssText: 'background:red;background: rgba(17, 202, 190, 0.5);border: 1px solid rgba(17, 202, 190, 1);'},legend: {// left: '0%',top: '13%',right: '6%',icon: 'circle',itemHeight: 7,itemWidth: 7,itemGap: 20,align: 'left',textStyle: { //图例文字的样式color: '#fff',fontSize: '12px'},data: ['早Ca', 'Ca']},xAxis: {type: 'category',splitLine: {show: false // 去除网格线},axisLine: {show: true,lineStyle:{color: '#2B534D',},},axisTick: {show: false,},axisLabel: {show: true,color: 'rgba(256,256,256,0.7)', //坐标值的颜色},data: ['', '', '']},yAxis: {type: 'value',splitLine: {show: true, // 去除网格线lineStyle: {color: 'rgba(27, 68, 54, 0.7)',type: 'dashed' //设置间隔线为虚线}},axisTick: {show: false //小横线},splitArea: {// show: true // 保留网格区域},axisLine: {show: false, // 去除纵向边框线lineStyle: {}},axisLabel: {show:true,color: 'rgba(59, 157, 165, 1)',margin: 30,align: 'left',},minInterval: 1},series: [{name: '早Ca',type: 'bar',barWidth:'12px',data: [80,60,50],barGap: '100%',itemStyle: {borderRadius: [20,20,0,0],},label:{show:false,},},{name: 'Ca',type: 'bar',barWidth:'12px',data: [50,40,80],itemStyle: {borderRadius: [20,20,0,0],},label:{show:false,},}]}

柱状图3：

import * as echarts from 'echarts'
let option = {grid: {   // 直角坐标系内绘图网格left: '25',  //grid 组件离容器左侧的距离,//left的值可以是80这样具体像素值，//也可以是'80%'这样相对于容器高度的百分比top: '40',right: '25',// bottom: '10',containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，// left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的//所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景},xAxis: {  //直角坐标系grid中的x轴,//一般情况下单个grid组件最多只能放上下两个x轴,//多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。type: 'value',//坐标轴类型,分别有：//'value'-数值轴；'category'-类目轴;//'time'-时间轴;'log'-对数轴splitLine: { show: false },//坐标轴在 grid 区域中的分隔线axisLabel: { show: false },//坐标轴刻度标签axisTick: { show: false },//坐标轴刻度axisLine: { show: false },//坐标轴轴线},yAxis: {type: 'category',splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},max: 100,},series: [//系列列表。每个系列通过 type 决定自己的图表类型{name: '%',//系列名称type: 'bar',//柱状、条形图//   barWidth: 10,//柱条的宽度,默认自适应data: [80],//系列中数据内容数组itemStyle: {//图形样式//emphasis图形在高亮状态下的样式borderRadius: 10,//柱条圆角半径,单位px.//此处统一设置4个角的圆角大小;//也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 0,color: 'rgba(17, 202, 190, 0.5)'//柱图渐变色起点颜色},{offset: 1,color: 'rgba(17, 202, 190, 1)'//柱图渐变色终点颜色}])},label: {show: true,formatter: '',backgroundColor: '#fff',width: 6,height: 6,position: 'right',offset: [-7, 0],borderWidth: 7,borderColor: 'rgba(24, 125, 128, 0.5)',borderRadius: 7,// shadowColor:'#fff',shadowBlur: 30},showBackground: true,silent: true,barWidth: 4,barGap: '-100%', // Make series be overlapzlevel: 1//柱状图所有图形的 zlevel 值,//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面},{name: '进度条背景',type: 'bar',//   barGap: '-100%',//不同系列的柱间距离，为百分比。// 在同一坐标系上，此属性会被多个 'bar' 系列共享。// 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，//并且是对此坐标系中所有 'bar' 系列生效。barWidth: 8,data: [100],color: 'rgba(36,245,249,0.2)',itemStyle: {borderRadius: 10}}]
}

折线图1：

import * as echarts from 'echarts'
let option = {legend:{show: true,icon: 'circle',itemHeight: '10',top: 200,left: 30,textStyle: {fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '14px',color: 'rgba(202, 255, 255, 0.7)',letterSpacing: '0',},},tooltip: {trigger: 'axis',axisPointer: {type: 'line',lineStyle: {color: 'rgba(17, 202, 190, 0.5)',type: 'dashed',width: 1},},textStyle: {color: "white" //设置文字颜色},extraCssText: 'background:red;background: rgba(17, 202, 190, 0.5);border: 1px solid rgba(17, 202, 190, 1);'},formatter: function (params) {// console.log(params);let rehtml = params[0].axisValue;for (let i in params) {rehtml += '<br/>' + params[i].marker + params[i].seriesName + '  ' + params[i].value + "%"}return rehtml;},grid: {left: '2%',right: '6%',top: '10%',bottom: '30%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,splitLine: {show: false // 去除网格线},axisLine: {show: true,lineStyle:{color: '#2B534D',},},axisTick: {show: false,},axisLabel: {show: true,margin: 10,fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '13px',color: '#95BBBA',letterSpacing: '0',},data: ['25周','26周','27周','28周','29周','30周','31周','32周','33周','34周']},yAxis: {type: 'value',axisLabel: {show: true,color: 'rgba(59, 157, 165, 1)',margin: 30,align: 'left',},splitLine: {show: true, // 去除网格线lineStyle: {color: 'rgba(27, 68, 54, 0.7)',type: 'dashed' //设置间隔线为虚线}},},series: [{name: '食管癌早期诊断率',type: 'line',smooth: true,symbol: "circle",symbolSize:3,showSymbol: false,itemStyle: {color: 'rgba(36, 108, 249, 1)',},data: [50,45,48,41,25,48,56,45,54,49]},{name: '消化内镜检查完整率',type: 'line',smooth: true,symbol: "circle",symbolSize:3,showSymbol: false,itemStyle: {color: 'rgba(17, 202, 190, 1)',},data: [50,51,52,53,50,56,54,55,48,53]},{name: '胃癌早期诊断率',type: 'line',smooth: true,symbol: "circle",symbolSize:3,showSymbol: false,itemStyle: {color: 'rgba(195, 170, 132, 1)',},data: [40,41,42,43,40,46,44,45,38,43]},{name: '磁控胶囊胃镜检查完整率',type: 'line',smooth: true,symbol: "circle",symbolSize:3,showSymbol: false,itemStyle: {color: 'rgba(188, 118, 118, 1)',},data: [30,24,26,23,54,23,69,87,54,10]},]
}

盒须图+折线图+柱状图+参考线

let option = {title: {text: '各地区结肠镜检查肠道准备优良率',top: '24px',left: '24px',textStyle: {fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '18px',color: '#D5E3FF',letterSpacing: '1px',},},legend:{show: true,data:[{name:'指标分位数',icon:"image://./images/boxplot.png"},{name:'均值',icon:"image://./images/line.png"},],top: '7.5%',right: '17%',itemHeight: 16,itemWidth: 20,itemGap: 30,textStyle:{fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '14px',color: '#7DC1F5',letterSpacing: '0',},},dataset: [// {//     source: [//         [850, 740, 900, 1070, 930],//         [960, 940, 1100, 900, 730],//         [800, 830, 900, 860, 720],//         [900, 880, 760, 830, 1000],//         [1300, 500, 780, 810, 900],//     ],// },// {//     transform: {//         type: 'boxplot',//         config: { //             itemNameFormatter: function (value) {//                 // console.log(value);//                 let xArr = ['山东省','浙江省','四川省','广东省','内蒙古']//                 return xArr[value.value]//             },//         },//     },// },// {//     fromDatasetIndex: 1,//     fromTransformResult: 1,// },// {//     source: {//         name:['山东省','浙江省','四川省','广东省','内蒙古'],//         value:[900,800,900,1000,800]//     }// },],tooltip: {show:true,trigger: 'axis',axisPointer: {type: 'line',lineStyle: {color: 'rgba(63,114,223,0.2)',type: 'solid',width: 80},},textStyle: {fontFamily: "PingFangSC-Regular",fontWeight: "400",fontSize: "16px",color: "#FFFFFF",},extraCssText: 'background:red;background: #24499F;border: 1px solid #3F72DF;',formatter:function(params){// console.log(params);let ckline = "<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#6C3E5E;\"></span>"if(params.length==4){return [params[0].name,isNaN(params[0].value[5])?params[0].marker+"upper：0.00%":params[0].marker+"upper: " + params[0].value[5].toFixed(2)+'%',isNaN(params[0].value[4])?params[0].marker+"Q3：0.00%":params[0].marker+"Q3: " + params[0].value[4].toFixed(2)+'%',isNaN(params[0].value[3])?params[0].marker+"median：0":params[0].marker+"median: " + params[0].value[3].toFixed(2)+'%',isNaN(params[0].value[2])?params[0].marker+"Q1：0.00%":params[0].marker+"Q1: " + params[0].value[2].toFixed(2)+'%',isNaN(params[0].value[1])?params[0].marker+"lower：0.00%":params[0].marker+"lower: " + params[0].value[1].toFixed(2)+'%',params[1].value[1]?params[1].marker+'均值: '+ params[1].value[1]+'%':params[1].marker+'均值: 0%',that.keyVal?ckline+'参考值: '+ that.keyVal+'%':ckline+'参考值: 0%',params[2].value[1]?params[2].marker+that.zhibiaoFMname+': '+ params[2].value[1]:params[2].marker+that.zhibiaoFMname+': 0',].join("<br/>");}else{return [params[0].name,isNaN(params[0].value[5])?params[0].marker+"upper：0.00%":params[0].marker+"upper: " + params[0].value[5].toFixed(2)+'%',isNaN(params[0].value[4])?params[0].marker+"Q3：0.00%":params[0].marker+"Q3: " + params[0].value[4].toFixed(2)+'%',isNaN(params[0].value[3])?params[0].marker+"median：0":params[0].marker+"median: " + params[0].value[3].toFixed(2)+'%',isNaN(params[0].value[2])?params[0].marker+"Q1：0.00%":params[0].marker+"Q1: " + params[0].value[2].toFixed(2)+'%',isNaN(params[0].value[1])?params[0].marker+"lower：0.00%":params[0].marker+"lower: " + params[0].value[1].toFixed(2)+'%',params[1].value[1]?params[1].marker+'异常点: '+ (params[1].value[1]*1).toFixed(2)+'%':params[1].marker+'异常点: 0%',params[2].value[1]?params[2].marker+'均值: '+ params[2].value[1]+'%':params[2].marker+'均值: 0%',that.keyVal?ckline+'参考值: '+ that.keyVal+'%':ckline+'参考值: 0%',params[3].value[1]?params[3].marker+that.zhibiaoFMname+': '+ params[3].value[1]:params[3].marker+that.zhibiaoFMname+': 0',].join("<br/>");}}},grid: {left: '0%',right: '2.5%',top: '25%',bottom: '10%',containLabel: true},dataZoom:{brushSelect:false,type: 'slider',show: true,startValue: 0,height:10,endValue: 6,left:30,right:30,bottom:10,borderColor: "transparent",backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色showDataShadow: false,//是否显示数据阴影 默认autoshowDetail: true,//即拖拽时候是否显示详细数值信息 默认truefillerColor:'#183273', // 可移动滚动条的颜色填充zoomLock:true, // 不让滚动条进行两头缩放handleStyle: { // 滚动条中间的样式color: 'transparent',shadowBlur: 3,shadowColor: 'transparent',shadowOffsetX: 2,shadowOffsetY: 2,background: "#ddd",borderColor: "transparent",},},xAxis: {type: 'category',boundaryGap: true,nameGap: 30,splitArea: {show: false},splitLine: {show: false},axisLabel: {show: true,fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '16px',color: '#B6DFFF',letterSpacing: '0',textAlign: 'center',},axisTick: {show: false,},axisLine: {show: true,lineStyle:{color: '#364A7D',},},},yAxis: [{type: 'value',splitLine: {show: false, // 去除网格线lineStyle: {color: 'rgba(27, 68, 54, 0.7)',type: 'dashed' //设置间隔线为虚线},},axisTick: {show: false //小横线},splitArea: {show: true, // 保留网格区域areaStyle:{color: ['rgba(255,255,255,0.01)','rgba(255,255,255,0.05)']},},axisLine: {show: false, // 去除纵向边框线lineStyle: {}},axisLabel: {show:true,fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '12px',color: '#246CF9',letterSpacing: '0',margin: 0,align: 'left',formatter: '{value}%',},},{type: 'value',splitLine: {show: false, // 去除网格线},axisTick: {show: false //小横线},splitArea: {show: false, // 保留网格区域},axisLine: {show: false, // 去除纵向边框线},axisLabel: {show:false,},},{type: 'value',splitLine: {show: false, // 去除网格线},axisTick: {show: false //小横线},splitArea: {show: false, // 保留网格区域},axisLine: {show: false, // 去除纵向边框线},axisLabel: {show:false,},},],series: [{name: '指标分位数',type: 'boxplot',datasetIndex: 1,yAxisIndex: 2,boxWidth: '24',z: 0,itemStyle:{color: 'transparent',borderColor: '#7DC1F5',borderWidth: 2,},},{// name: '病例数',type: 'scatter',datasetIndex: 2,yAxisIndex: 2,symbolSize: 8,z: 1,itemStyle:{color: '#246CF9',},// tooltip:{show:false,}},{name: '均值',type: 'line',z: 2,datasetIndex: 3,symbol: "circle",symbolSize: 6,yAxisIndex: 0,markLine: {name: "参考值" ,symbol: "none",silent: true,lineStyle: { // 警戒线样式type: "solid",color: "#6C3E5E",},label: {position: "start",},data: [{yAxis: 1100,label: {show: false,position: "",},},],},itemStyle: {color: "#30E0A1",},lineStyle:{type: "solid", //设置网格线类型 dotted：虚线   solid:实线width:1.5//设置线条粗细},// tooltip:{show:false,}},{// name: "背景",type: "bar",barWidth: 52,yAxisIndex: 1,barGap: "-165%",datasetIndex: 3,itemStyle: {color: "rgba(36, 108, 249, 0.2)",},// tooltip:{show:false,},},{name: '参考值',type: 'line',datasetIndex: 1,yAxisIndex: 2,itemStyle: {color: "rgba(36, 108, 249, 0)",},markLine: {symbol: "none",silent: true,lineStyle: { // 警戒线样式type: "solid",color: "#6C3E5E",},label: {position: "start",},data: [{yAxis: 1100,label: {show: false,position: "",},},],},},]
}

折线图+堆叠柱状图：

let option = {color:['#E3988E','#9F91FF','#2CC6FF','#5B93FF','#FFB545','#30E0A1'].reverse(),title:{text:'结肠镜检查肠道准备优良率指标走势',top: '24px',left: '24px',textStyle: {fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '18px',color: '#D5E3FF',letterSpacing: '1px',},},grid:{left: '2%',right: '2%',top: '38%',bottom: '10%',containLabel: true,},legend:[{show: true,data:[],top: '15%',right: '2%',itemHeight: 10,itemWidth: 18,itemGap: 30,textStyle:{fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '14px',color: '#7DC1F5',letterSpacing: '0',},},{show: true,data:['均值分子','均值分母'],top: '22%',right: '2%',itemHeight: 15,itemWidth: 10,itemGap: 30,textStyle:{fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '14px',color: '#7DC1F5',letterSpacing: '0',},}],tooltip: {trigger: 'axis',// formatter:function(e){//     console.log(e);// },axisPointer: {type: 'line',lineStyle: {color: 'rgba(63,114,223,0.2)',type: 'solid',width: 52},},textStyle: {color: "white" //设置文字颜色},extraCssText: 'background:red;background: rgba(63,114,223,0.5);border: 1px solid #3F72DF;'},xAxis: {type: 'category',boundaryGap: true,nameGap: 30,splitArea: {show: false},splitLine: {show: false},axisLabel: {show: true,fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '16px',color: '#B6DFFF',letterSpacing: '0',textAlign: 'center',},axisTick: {show: false,},axisLine: {show: true,lineStyle:{color: '#364A7D',},},data:[],},yAxis: [{max:'100',min:'50',maxInterval: 40,interval:10,type: 'value',splitLine: {show: false, // 去除网格线},axisTick: {show: false //小横线},splitArea: {show: false, // 保留网格区域},axisLine: {show: false, // 去除纵向边框线lineStyle: {}},axisLabel: {show:true,fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '12px',color: '#246CF9',letterSpacing: '0',margin: 5,interval: 'auto',  // formatter: '{value} %',formatter: function (params) {// console.log(params);if(params>=0&&params<=100){return params+'%'}},},},{type: 'value',splitLine: {show: false, // 去除网格线},axisTick: {show: false //小横线},splitArea: {show: true, // 保留网格区域areaStyle:{color: ['rgba(255,255,255,0.01)','rgba(255,255,255,0.05)']},},axisLine: {show: false, // 去除纵向边框线lineStyle: {}},axisLabel: {show:true,fontFamily: 'PingFangSC-Regular',fontWeight: '400',fontSize: '12px',color: '#246CF9',letterSpacing: '0',margin: 5,align: 'left',},},],dataZoom:{brushSelect:false,type: 'slider',show: true,startValue: 0,height:10,endValue: 9,left:30,right:30,bottom:10,borderColor: "transparent",backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色showDataShadow: false,//是否显示数据阴影 默认autoshowDetail: true,//即拖拽时候是否显示详细数值信息 默认truefillerColor:'#183273', // 可移动滚动条的颜色填充zoomLock:true, // 不让滚动条进行两头缩放handleStyle: { // 滚动条中间的样式color: 'transparent',shadowBlur: 3,shadowColor: 'transparent',shadowOffsetX: 2,shadowOffsetY: 2,background: "#ddd",borderColor: "transparent",},},series:[{// name: '均值分母',type: 'bar',yAxisIndex: 1,data:[10,20,30,40,50,60],barWidth: '16',z: 0,itemStyle:{color: '#246CF9',},stack: 'total',},{// name: '均值分子',type: 'bar',yAxisIndex: 1,data:[10,30,10,20,20,10],barWidth: '16',z: 0,itemStyle:{color: 'rgba(36,108,249,0.3)',borderRadius:[4,4,0,0],},stack: 'total',},// {//     name: "背景",//     type: "bar",//     barWidth: 52,//     barGap: "-210%",//     yAxisIndex: 1,//     data:[100,100,100,100,100,100],//     z: 0,//     itemStyle: {//         color: "rgba(36, 108, 249, 0.2)",//     },//     tooltip:{show:false,},//     legend:{show:false,},// },// {//     name: '折线图',//     type: 'line',//     symbol: 'circle',//     yAxisIndex: 0,//     z: 1,//     data:[70,80,90,100,60,70],//     symbolSize: 8,//     itemStyle: {//         color: "#30E0A1",//     },//     lineStyle:{//         type: "solid", //设置网格线类型 dotted：虚线   solid:实线//         width:1.5//设置线条粗细//     },// },],
}

let colorList = ['#11CABE','#24A0F9','#246CF9','#5C4CBA','#B6DFFF']this.zllbmyChart = this.$echarts.init(document.getElementById('Diagnosisworkload'))let option = {title: {show: false,},legend: { //有哪几个类别show: false,},tooltip: {show: true,textStyle: {color: "white" //设置文字颜色},// formatter:'{d}%',formatter: (params) => {// console.log(params);return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:${params.color}"></span>${params.name} ${params.value + ' %'}`},extraCssText: 'background:red;background: rgba(26,54,138,0.8);border: 1px solid #90B6FF;'},series: [{type: 'pie',center: ['50%', '50%'],radius: ['60%', '75%'],avoidLabelOverlap: false,itemStyle: {borderWidth: 3,borderColor: "#0F1454",color: function(params) {return colorList[params.dataIndex]},},label: {show: true,position: 'outside',formatter: (params) => {// console.log(params,'这里这里');//暂时写的死的if (params.name == 'EUS') {return '{a|' + params.name + '}\n{d|' + this.fenziArr[0]+'}{text|/'  + this.fenmuArr[0]+'}'} else if(params.name == 'ERCP') {return '{a|' + params.name + '}\n{d|' + this.fenziArr[1]+'}{text|/'  + this.fenmuArr[1]+'}'}else if(params.name == '肠镜') {return '{a|' + params.name + '}\n{d|' + this.fenziArr[2]+'}{text|/'  + this.fenmuArr[2]+'}'}else if(params.name == '胃镜') {return '{a|' + params.name + '}\n{d|' + this.fenziArr[3]+'}{text|/'  + this.fenmuArr[3]+'}'}else if(params.name == '其他') {return '{a|' + '其他' + '}\n{d|' + this.fenziArr[4]+'}{text|/'  + this.fenmuArr[4]+'}'}},rich: {a: {fontSize: '14',fontWeight: '500',padding: [5, 6, 0, 0],color: 'inherit'},d: {fontSize: '14',fontFamily: 'DINPro',padding: [10, 0, 0, 0],color: '#fff',},text: {fontSize: '14',padding: [10, 0, 0, 0],color: '#11CABE',},}},labelLine: {length: 0,length2: 50,smooth: 1.5,lineStyle: {width: 1,},},data: [{name:'EUS',value:this.zllb1},{name:'ERCP',value:this.zllb2},{name:'肠镜',value:this.zllb3},{name:'胃镜',value:this.zllb4},{name:'其他',value:this.zllb5},],}, ]}