0
0

echarts环形图内部圆，外部圆形以及阴影设置

环形图

修改图例自定义icon

完整代码图

  1.   Chart1() { // 折算价值户新增构成
  2.       let chartDom = document.getElementById('main');
  3.       let myChart = this.$echarts.init(chartDom);
  4.       let option;
  5.       option = {
  6.         // 设置占比图颜色
  7.         color:['#FFA500','#66CDAA','    #1E90FF','    #E8E8E8'],
  8.         tooltip: { //提示框
  9.           trigger: 'item',
  10.           formatter: '{b} : <br/> {c} ({d}%)'
  11.         },
  12.         title:[ // 中心换行标题
  13.           {
  14.             text: "总计",
  15.             left: '24%',
  16.             top: '43%',
  17.             textStyle: {
  18.               color: 'black',
  19.               fontSize: 12,
  20.               fontWeight: "400",
  21.               color:'#1787ff'
  22.             }
  23.           },
  24.           {
  25.             text: '100%',
  26.             left: '22%',
  27.             top: '35%',
  28.             textStyle: {
  29.               color: 'black',
  30.               fontSize: 14,
  31.               fontWeight: "400",
  32.               color:'#1787ff',
  33.               fill: 'red',
  34.             }
  35.           }
  36.         ],
  37.         legend: {// 图例
  38.           orient: 'vertical',//horizontal 水平显示，vertical 垂直显示
  39.           right: 0,
  40.           top: 20,
  41.           bottom: 20,
  42.           itemWidth:10,//图例宽度
  43.           itemHeight: 10,
  44.           itemGap: 35,//图例之间间距
  45.         },
  46.         series: [
  47.           {
  48.             name: '占比',
  49.             startAngle: 180,
  50.             label: {// 点击展示方式
  51.               show: false,
  52.             },
  53.             type: 'pie',
  54.             radius: ['35%', '60%'],// 饼图大小设置
  55.             roseType: 'area',
  56.             avoidLabelOverlap: true,// 是否启用防止标签重叠策略
  57.             labelLine: { // z折线连接的标题
  58.               show: false
  59.             },
  60.             center: ['30%', '40%'],//饼图位置
  61.             data: [
  62.               { value: 735, name: '25% 彭浦支行' },
  63.               { value: 735, name: '25% 闸北支行' },
  64.               { value: 580, name: '40% 芷江支行' },
  65.               { value: 384, name: '10% 其他' }
  66.             ]
  67.           },
  68.           {
  69.             name:'中心圆',
  70.             radius: ['0%', '30%'],
  71.             center: ['30%', '40%'],
  72.             type: 'pie',
  73.             color:"white",  //内圆颜色
  74.             itemStyle: { 
  75.               normal: {
  76.                 // 设置阴影
  77.                 shadowBlur: 30,
  78.                 shadowColor: 'rgba(147, 147, 147,0.3)', 
  79.                 shadowOffsetX: 0,
  80.                 shadowOffsetY: 7
  81.               }
  82.             },
  83.             label: {
  84.               normal: {
  85.                   show: false
  86.               },
  87.               emphasis: {
  88.                   show: false
  89.               }
  90.             },
  91.             labelLine: {
  92.                 normal: {
  93.                   show: false
  94.                 },
  95.                 emphasis: {
  96.                   show: false
  97.                 }
  98.             },
  99.             animation: false,
  100.             tooltip: {
  101.               show: false
  102.             },
  103.             data: [{
  104.               value: 1,
  105.             }],
  106.         },
  107.         {
  108.           name: '外边框',
  109.           type: 'pie',
  110.           color:"white",  //内圆颜色
  111.           clockWise: false, //顺时加载
  112.           hoverAnimation: false, //鼠标移入变大
  113.           center: ['30%', '40%'],
  114.           radius: ['60%', '65%'],
  115.           itemStyle: { 
  116.             normal: {
  117.               // 设置阴影
  118.               shadowBlur: 30,
  119.               shadowColor: 'rgba(147, 147, 147,0.3)', 
  120.               shadowOffsetX: 10,
  121.               shadowOffsetY: 7
  122.             }
  123.           },
  124.           label: {
  125.             normal: {
  126.                 show: false
  127.             }
  128.           },
  129.           data: [{
  130.             value: 9,
  131.             name: '',
  132.             itemStyle: {
  133.                 normal: { //可以设置样式
  134.                   // borderWidth: 2,
  135.                   // borderColor: '#2ec7c9'
  136.                 }
  137.             }
  138.           }]
  139.         },
  140.         ]
  141.       };
  142.       option && myChart.setOption(option);
  143.     },

柱状图

  1. Chart2(){
  2.       let chartDom = document.getElementById('main2');
  3.       let myChart = this.$echarts.init(chartDom);
  4.       let category = ['彭浦支行', '闸北支行', '芷江支行', '其他'];
  5.       // let barData = [310, 212, 118, 81];
  6.       let option;
  7.       option = {
  8.         tooltip: {
  9.           trigger: 'item',
  10.         },
  11.         legend: {
  12.           x:'center',
  13.           y:'bottom',
  14.           icon: "circle", // 修改形状
  15.           temHeight: 1, // 修改icon图形大小
  16.           itemGap: 14, // 修改间距
  17.           textStyle: {
  18.             fontSize: 10,
  19.             color: "#333",
  20.           },
  21.         },
  22.         grid: {
  23.           left: '3%',
  24.           right: '4%',
  25.           top: '2%',
  26.           containLabel: false
  27.         },
  28.         xAxis: {
  29.           type: 'value',
  30.           axisLine: {
  31.             show: false
  32.           },
  33.           axisTick: {
  34.             show: false
  35.           },
  36.           axisLabel: {
  37.             show: false 
  38.           },
  39.           splitLine:{ // 背景线条
  40.             show:true,
  41.             lineStyle:{
  42.               color:'    #d6d6d6',
  43.               width:0.2,// 线条宽
  44.             }
  45.           }
  46.         },
  47.         yAxis: [
  48.           {
  49.             type: 'category',
  50.             show:false,
  51.             inverse:true,
  52.             data: category,
  53.             axisLine: {
  54.               show: false
  55.             },
  56.             axisTick: {
  57.               show: false
  58.             }
  59.           },
  60.        ],
  61.         series: [
  62.         {
  63.           name: '彭浦支行',
  64.           data: [310, null, null,  null],
  65.           type: 'bar',
  66.           barWidth:10,// 柱子宽度
  67.           stack: 'Mon',
  68.           itemStyle: {
  69.             normal: {
  70.               barBorderRadius: 17,
  71.               color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  72.               {
  73.                 offset: 0,
  74.                 color: '#FFD700'
  75.               }, {
  76.                 offset: 1,
  77.                 color: '#FFA500'
  78.               }]),
  79.             },
  80.           },
  81.           label: {
  82.             show: true,
  83.             position: 'right',
  84.             formatter: '{c}',
  85.           }
  86.         },
  87.         {
  88.           name: '闸北支行',
  89.           data: [null, 212, null,  null],
  90.           type: 'bar',
  91.           stack: 'Mon',
  92.           itemStyle: {
  93.             normal: {
  94.               barBorderRadius: 17,
  95.               color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  96.               {
  97.                 offset: 0,
  98.                 color: '#87CEFF'
  99.               }, {
  100.                 offset: 1,
  101.                 color: '#5284DE'
  102.               }]),
  103.             }
  104.           },
  105.           label: {
  106.             show: true,
  107.             position: 'right',
  108.             formatter: '{c}',
  109.           }
  110.         },
  111.         {
  112.           name: '芷江支行',
  113.           data: [null, null, 118, null],
  114.           type: 'bar',
  115.           stack: 'Mon',
  116.           itemStyle: {
  117.             normal: {
  118.               barBorderRadius: 17,
  119.               //这里是颜色
  120.               color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  121.               {
  122.                 offset: 0,
  123.                 color: '#76EEC6'
  124.               }, {
  125.                 offset: 1,
  126.                 color: '#66CDAA'
  127.               }]),
  128.             }
  129.           },
  130.           label: {
  131.             show: true,
  132.             position: 'right',
  133.             formatter: '{c}',
  134.           }
  135.         },
  136.         {
  137.           name: '其他',
  138.           data: [null, null, null,  81],
  139.           type: 'bar',
  140.           stack: 'Mon',
  141.           itemStyle: {
  142.             normal: {
  143.               barBorderRadius: 17,
  144.               //这里是颜色
  145.               color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  146.               {
  147.                 offset: 0,
  148.                 color: '#F5F5F5'
  149.               }, {
  150.                 offset: 1,
  151.                 color: '#E8E8E8'
  152.               }]),
  153.             }
  154.           },
  155.           label: {
  156.             show: true,
  157.             position: 'right',
  158.             formatter: '{c}',
  159.           }
  160.         },
  161.         ]
  162.       };
  164.       option && myChart.setOption(option);
  165.     },

半圆图

  1. Chart3(){
  2.       let chartDom = document.getElementById('main3');
  3.       let myChart = this.$echarts.init(chartDom);
  4.       let option;
  5.       // 进度百分比
  6.       let value = 95
  7.       option = {
  8.         title: [{
  9.             text: value + '%',
  10.             left: 'center',
  11.             top: '40%',
  12.             textStyle: {
  13.               color: 'rgba(64, 140, 255, 1)',
  14.               fontSize: 20
  15.             }
  16.         }, {
  17.             text: '目标完成率',
  18.             left: 'center',
  19.             top: '55%',
  20.             textStyle: {
  21.               color: 'black',
  22.               fontSize: 10,
  23.               color:'grey'
  24.             }
  25.         }],
  26.         legend: {
  27.           bottom:'20',
  28.           itemWidth:15,
  29.           itemHeight: 10,
  30.           itemGap: 45,//图例间距
  31.           data: ["价值户新增数:45个", "目标总数:90个", ],
  32.         },
  33.         angleAxis: {
  34.           show: false,
  35.           // 后面的180表示圆环的跨越的角度， 如max设置为100*360/270,startAngle设置为-135
  36.           max: 100 * 360 / 180,
  37.           type: 'value',
  38.           startAngle: 180,
  39.           splitLine: {
  40.             show: false
  41.           }
  42.         },
  43.         // 修改环形的宽度
  44.         barMaxWidth: 15,
  45.         radiusAxis: {
  46.           show: false,
  47.           type: 'category'
  48.         },
  49.         polar: {
  50.           // 设置环形的位置
  51.           center: ['50%', '60%'],
  52.           // 设置环形大小
  53.           radius: '150%'
  54.         },
  55.         series:[
  56.           {
  57.             name:'价值户新增数:45个',
  58.             color: 'rgba(23, 135, 255, 1)',
  59.             type: 'bar',
  60.             roundCap: true, // 开启圆角
  61.             data: [
  62.               { 
  63.                 value: value,
  64.                 itemStyle: {
  65.                   normal: {
  66.                     opacity: 1,
  67.                     color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  68.                       {
  69.                         offset: 0,
  70.                         color: '#25BFFF'
  71.                       }, {
  72.                         offset: 1,
  73.                         color: '#5284DE'
  74.                       }]),
  75.                     shadowColor: '#2A95F9'
  76.                   }
  77.                 }
  78.               }
  79.             ],
  80.             barGap: '-100%',
  81.             coordinateSystem: 'polar',
  82.             z: 3
  83.         }, {
  84.             name:'目标总数:90个',
  85.             color: 'rgba(244, 249, 253, 1)',
  86.             type: 'bar',
  87.             roundCap: true,// 开启圆角
  88.             data: [{
  89.                 value: 100,
  90.                 itemStyle: {
  91.                   // 这里是环形底色
  92.                   color: 'rgba(244, 249, 253, 1)',
  93.                   borderWidth: 0
  94.                 }
  95.             }],
  96.             barGap: '-100%',
  97.             coordinateSystem: 'polar',
  98.             z: 1
  99.         }]
  100.       }
  101.       option && myChart.setOption(option);
  103.     },

折线图

  1. Chart4() {
  2.       let chartDom = document.getElementById('main4');
  3.       let myChart = this.$echarts.init(chartDom);
  4.       let option;
  5.       option = {
  6.         tooltip: { //提示框
  7.        //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
  8.           trigger: 'item', 
  9.           formatter:'{b}<br/>价值户新增:{c}',
  10.         },
  11.         xAxis: {
  12.           type: 'category',
  13.           boundaryGap: false,// 坐标轴两边是不是留白
  14.           data: ['04/28', '04/30', '05/02', '05/04','05/08','05/10','5/20'],
  15.           axisLine: {//坐标系
  16.             show: true,
  17.             lineStyle:{ //x坐标系字体样式
  18.               color:'#E8E8E8',
  19.               width:0.5
  20.             }
  21.           },
  22.           axisLabel: {
  23.             interval:1,//0代表显示所有x轴标签显示,1不显示全
  24.             color:'grey'//x轴字体颜色
  25.           },
  26.           axisTick: { // 刻度线
  27.             show: false,
  28.           },
  29.         },
  30.         yAxis: {
  31.           type: 'value',
  32.           axisLabel:{//字体
  33.             color:'grey'
  34.           },
  35.           axisLine: {//y轴线
  36.             show: true,
  37.             lineStyle:{
  38.               color:'#BEBEBE'
  39.             }
  40.           },
  41.           axisTick: {//y刻度线
  42.               show: false
  43.           },
  44.           splitLine: { // 背景线 分割线
  45.             show: true,
  46.             lineStyle:{
  47.               type:'dashed',
  48.               color:'    #F5F5F5'
  49.             }
  50.           }
  51.         },
  52.         series: [
  53.           {
  54.             data: [13, 26, 30, 66, 30,8,40],
  55.             type: 'line',
  56.             smooth: true,//显示平滑曲线
  57.             lineStyle:{
  58.               color:'#00BFFF' //折线颜色
  59.             },
  60.             itemStyle : { //折线点颜色
  61.               normal : {
  62.                 color:'#00BFFF'
  63.               }
  64.             },
  65.             areaStyle: { //区域渐变色
  66.               normal: {
  67.                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
  68.                   {
  69.                     offset: 0,
  70.                     color: '#87CEFF'
  71.                   }, {
  72.                     offset: 1,
  73.                     color: '#ffffff'
  74.                   }
  75.                 ]),
  76.               }
  77.             },
  78.           }
  79.         ]
  80.       };
  82.       option && myChart.setOption(option);
  84.     }
标签： echarts vue.js 前端
本文转载自: https://blog.csdn.net/weixin_54368936/article/details/129124934
版权归原作者 西洛.sco 所有， 如有侵权，请联系我们删除。
登录后发布评论

“echarts环形图内部圆，外部圆形以及阴影设置”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？