环形图

修改图例自定义icon

完整代码图

  Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myChart = this.$echarts.init(chartDom);let option;option = {// 设置占比图颜色color:['#FFA500','#66CDAA','    #1E90FF','    #E8E8E8'],tooltip: { //提示框trigger: 'item',formatter: '{b} : <br/> {c} ({d}%)'},title:[ // 中心换行标题{text: "总计",left: '24%',top: '43%',textStyle: {color: 'black',fontSize: 12,fontWeight: "400",color:'#1787ff'}},{text: '100%',left: '22%',top: '35%',textStyle: {color: 'black',fontSize: 14,fontWeight: "400",color:'#1787ff',fill: 'red',}}],legend: {// 图例orient: 'vertical',//horizontal 水平显示，vertical 垂直显示right: 0,top: 20,bottom: 20,itemWidth:10,//图例宽度itemHeight: 10,itemGap: 35,//图例之间间距},series: [{name: '占比',startAngle: 180,label: {// 点击展示方式show: false,},type: 'pie',radius: ['35%', '60%'],// 饼图大小设置roseType: 'area',avoidLabelOverlap: true,// 是否启用防止标签重叠策略labelLine: { // z折线连接的标题show: false},center: ['30%', '40%'],//饼图位置data: [{ value: 735, name: '25% 彭浦支行' },{ value: 735, name: '25% 闸北支行' },{ value: 580, name: '40% 芷江支行' },{ value: 384, name: '10% 其他' }]},{name:'中心圆',radius: ['0%', '30%'],center: ['30%', '40%'],type: 'pie',color:"white",  //内圆颜色itemStyle: { normal: {// 设置阴影shadowBlur: 30,shadowColor: 'rgba(147, 147, 147,0.3)', shadowOffsetX: 0,shadowOffsetY: 7}},label: {normal: {show: false},emphasis: {show: false}},labelLine: {normal: {show: false},emphasis: {show: false}},animation: false,tooltip: {show: false},data: [{value: 1,}],},{name: '外边框',type: 'pie',color:"white",  //内圆颜色clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大center: ['30%', '40%'],radius: ['60%', '65%'],itemStyle: { normal: {// 设置阴影shadowBlur: 30,shadowColor: 'rgba(147, 147, 147,0.3)', shadowOffsetX: 10,shadowOffsetY: 7}},label: {normal: {show: false}},data: [{value: 9,name: '',itemStyle: {normal: { //可以设置样式// borderWidth: 2,// borderColor: '#2ec7c9'}}}]},]};option && myChart.setOption(option);},

柱状图

Chart2(){let chartDom = document.getElementById('main2');let myChart = this.$echarts.init(chartDom);let category = ['彭浦支行', '闸北支行', '芷江支行', '其他'];// let barData = [310, 212, 118, 81];let option;option = {tooltip: {trigger: 'item',},legend: {x:'center',y:'bottom',icon: "circle", // 修改形状temHeight: 1, // 修改icon图形大小itemGap: 14, // 修改间距textStyle: {fontSize: 10,color: "#333",},},grid: {left: '3%',right: '4%',top: '2%',containLabel: false},xAxis: {type: 'value',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false },splitLine:{ // 背景线条show:true,lineStyle:{color:'    #d6d6d6',width:0.2,// 线条宽}}},yAxis: [{type: 'category',show:false,inverse:true,data: category,axisLine: {show: false},axisTick: {show: false}},],series: [{name: '彭浦支行',data: [310, null, null,  null],type: 'bar',barWidth:10,// 柱子宽度stack: 'Mon',itemStyle: {normal: {barBorderRadius: 17,color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#FFD700'}, {offset: 1,color: '#FFA500'}]),},},label: {show: true,position: 'right',formatter: '{c}',}},{name: '闸北支行',data: [null, 212, null,  null],type: 'bar',stack: 'Mon',itemStyle: {normal: {barBorderRadius: 17,color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#87CEFF'}, {offset: 1,color: '#5284DE'}]),}},label: {show: true,position: 'right',formatter: '{c}',}},{name: '芷江支行',data: [null, null, 118, null],type: 'bar',stack: 'Mon',itemStyle: {normal: {barBorderRadius: 17,//这里是颜色color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#76EEC6'}, {offset: 1,color: '#66CDAA'}]),}},label: {show: true,position: 'right',formatter: '{c}',}},{name: '其他',data: [null, null, null,  81],type: 'bar',stack: 'Mon',itemStyle: {normal: {barBorderRadius: 17,//这里是颜色color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#F5F5F5'}, {offset: 1,color: '#E8E8E8'}]),}},label: {show: true,position: 'right',formatter: '{c}',}},]};option && myChart.setOption(option);},

半圆图

Chart3(){let chartDom = document.getElementById('main3');let myChart = this.$echarts.init(chartDom);let option;// 进度百分比let value = 95option = {title: [{text: value + '%',left: 'center',top: '40%',textStyle: {color: 'rgba(64, 140, 255, 1)',fontSize: 20}}, {text: '目标完成率',left: 'center',top: '55%',textStyle: {color: 'black',fontSize: 10,color:'grey'}}],legend: {bottom:'20',itemWidth:15,itemHeight: 10,itemGap: 45,//图例间距data: ["价值户新增数:45个", "目标总数:90个", ],},angleAxis: {show: false,// 后面的180表示圆环的跨越的角度， 如max设置为100*360/270,startAngle设置为-135max: 100 * 360 / 180,type: 'value',startAngle: 180,splitLine: {show: false}},// 修改环形的宽度barMaxWidth: 15,radiusAxis: {show: false,type: 'category'},polar: {// 设置环形的位置center: ['50%', '60%'],// 设置环形大小radius: '150%'},series:[{name:'价值户新增数:45个',color: 'rgba(23, 135, 255, 1)',type: 'bar',roundCap: true, // 开启圆角data: [{ value: value,itemStyle: {normal: {opacity: 1,color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#25BFFF'}, {offset: 1,color: '#5284DE'}]),shadowColor: '#2A95F9'}}}],barGap: '-100%',coordinateSystem: 'polar',z: 3}, {name:'目标总数:90个',color: 'rgba(244, 249, 253, 1)',type: 'bar',roundCap: true,// 开启圆角data: [{value: 100,itemStyle: {// 这里是环形底色color: 'rgba(244, 249, 253, 1)',borderWidth: 0}}],barGap: '-100%',coordinateSystem: 'polar',z: 1}]}option && myChart.setOption(option);},

折线图

Chart4() {let chartDom = document.getElementById('main4');let myChart = this.$echarts.init(chartDom);let option;option = {tooltip: { //提示框//触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，trigger: 'item', formatter:'{b}<br/>价值户新增:{c}',},xAxis: {type: 'category',boundaryGap: false,// 坐标轴两边是不是留白data: ['04/28', '04/30', '05/02', '05/04','05/08','05/10','5/20'],axisLine: {//坐标系show: true,lineStyle:{ //x坐标系字体样式color:'#E8E8E8',width:0.5}},axisLabel: {interval:1,//0代表显示所有x轴标签显示,1不显示全color:'grey'//x轴字体颜色},axisTick: { // 刻度线show: false,},},yAxis: {type: 'value',axisLabel:{//字体color:'grey'},axisLine: {//y轴线show: true,lineStyle:{color:'#BEBEBE'}},axisTick: {//y刻度线show: false},splitLine: { // 背景线 分割线show: true,lineStyle:{type:'dashed',color:'    #F5F5F5'}}},series: [{data: [13, 26, 30, 66, 30,8,40],type: 'line',smooth: true,//显示平滑曲线lineStyle:{color:'#00BFFF' //折线颜色},itemStyle : { //折线点颜色normal : {color:'#00BFFF'}},areaStyle: { //区域渐变色normal: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#87CEFF'}, {offset: 1,color: '#ffffff'}]),}},}]};option && myChart.setOption(option);}