Echarts在线免费图表

 
            
  var img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAAA6tJREFUWEft2Ltz00gcB3Dt6m3ZyDEO8c15zgrDwx3qQkeGBjrKlFfenwAdUNHCf3AldKELXdI5HS3DIzEhQWGU2I4k9N69kbK2Nxk2D8engRlceezV6jO//ek7uwJ3n71/wv2EH/DLwgJOqO4B7V7MQQNzQJlmcXkOWSqI384ib/34vCdWLOGgsg31fxAHqtMEHZ9Lw+GbK9jr0L+fCLNByXSA8gBwONS5YFlAKJgm0IGyGXLCLcjhfgv1XpwZZsHyog+kOyKHus20/+80UdlcDicbNq/9nX2fT/efMmEekBoJB+ThABfKZgQEM+sFPfVXLgoTOBxqOLKG8zhQNmxIYAkDZgmV+z4UFy5689Our6TB63r6/W1esQwmEFjEgG3ItcenTTqN/0WMus3osC0cgVrKkAVTCoSFFGxYsYAFUwuEBRRMJEvps2DaGJbFg4DQZgLzUM0fBhGl7wSUjhr3rMsaQtFEEOjD8WKKuk0aJhOYx4KVxzA1jdcbvrPSk9R2X1KX8r7wJouLBEJlq1R9OIJRczmibNhDmMuCXRrDeIysmcB/cyApCxHPtyHG/brvvdKS8aN+loplqH25tOCJ0uIIhlC36ZKlzGAqqdgBC6YX1GMZzKFgJQIbsGAzBcIGBCbLhj2E9ViwywXBsubvE5giG7ZGKrbHgtULgmVLuU/BygRms2BXCoJlFdujYJcI7BsLNnc0x5Qw7oSSaCJwmEFqFK9zGJ9725MIghHzsHUkx2wKphPYLgv2B5VjfrTW6LurvbLa7lfUpTwUv02YYwJUtmapHKPmckqyYQ9hX1mwP6kcS5GlO/7KQVlZTATeABgHVSdYBhNsFH1FavuKeHtUsQR1m7ukYmUKts2CNQvqsQxmUbAqWcovLNhfBcJ2KFiNwD6zYK0CYdsEVpENewjrsmDzBcFi1G1+oWB1UrENFuxqgbAtCjZLYJ9YsGvUU5mg3Zk9f2VQUxdjEbYAxqG+HywLyfmPb15Favul8VlCzCrWpWBzBPaBBbtO5ZgTrTUsd7VXU9v9y+pSPtnmBXJsfpxjfIIsvXd44nLLshmpggkRHrQ+9p7/8Pi2cYNKfoyDkht3fC3ffeancNWNO3CC5A8V3khE3jhp/6a60Vpjx139MexmMT125OYYh4obd46jsjGjVwQb7WJgeVt8PL0tRrDN9swjDMan8LNsnScZI0bnhNlzJdOtyff/TxxM8aC+473UnNPPDr/ui7tJlmsa1/yu2Hmr+B+322Sdg8cZUAAAAABJRU5ErkJggg=="
  const trafficWay = [
    {
      name: '岳麓区',
      value: 30
    },
    {
      name: '望城区',
      value: 20
    },
  
  ]
  // var nameArray = trafficWay.map((item) => {
  //   return item.name
  // })
 var sum= trafficWay.reduce((prev,cur)=>{return  prev+cur.value*1},0);

  const data = []
  const color =  [
          new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
              offset: 0,
              color: "#3b81dd"
            },
            {
              offset: 1,
              color: "#3b81dd50"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
              offset: 0,
              color: "rgba(255,181,111,1)"
            },
            {
              offset: 1,
              color: "rgba(255,181,111,0.3)"
            }
          ]),
          new echarts.graphic.LinearGradient(1, 1, 1, 0, [{
              offset: 0,
              color: "#d75e3b"
            },
            {
              offset: 1,
              color: "#d75e3b70"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: "rgba(45,190,146,1)"
            },
            {
              offset: 1,
              color: "rgba(45,190,146,0.3)"
            }
          ])
        ]
  for (let i = 0; i < trafficWay.length; i++) {
    data.push(
      {
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
          normal: {
            borderWidth: 15,
            borderRadius: 400,
   
          }
        }
      },
      {
        value: sum/60,
        name: '',
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)'
          }
        }
      }
    )
  }
  const seriesOption = [
    // 内圆
    {
      type: 'pie',
      zlevel: -1, // 层级
      radius: ['0%', '55%'],
      center: ['50%', '50%'],
      itemStyle: {
        normal: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,161,163,0.25)',
          color: '#244a78',
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      },
      hoverAnimation: false,
      data: [100]
    },
    {
      name: '',
      type: 'pie',
      clockWise: false,
      radius: ['130%', '150%'],
      hoverAnimation: false,
      center: ['50%', '50%'],
      top: 'center',
      itemStyle: {
        normal: {
          label: {
            show: false
          }
        }
      },
      data: data
    },
    // 外环
    {
      type: 'pie',
      radius: ['85%', '85%'],
      center: ['50%', '50%'],
      itemStyle: {
        normal: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,161,163,0.25)',
          color: 'rgba(0,161,163,0.04)',
          borderWidth:1,
          borderColor:'#4189db',
          borderType:['10','10'],
          borderLeft:0,
           borderRight:0,
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      },
      hoverAnimation: false,
      data: [100]
    }
  ]
option = {
    color: color,
  
     graphic: {
       elements: [
         {
           type: 'image',
           z: 3,
         style: {
             image: img,
             width: 180,
             height: 180
           },
          left: 'center' ,
          top:'center'
         }
       ]
     },
    tooltip: {
      show: false
    },
    series: seriesOption
  }