Echarts在线免费图表

 
            var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;




const gaugeData = [
  {
    value: 38,
    name: '避孕药',
    title: {
    color:'#e4bfad',

      
      offsetCenter: ['0%', '-33%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-20%']
    }
  },
  {
    value: 17.7,
    name: '避孕套',
    title: {
       color:'#e4bfad',
      offsetCenter: ['0%', '-3%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '10%']
    }
  },
 
];
option = {
   backgroundColor:"#232323",
    graphic: [
         {
            type: 'group',
            left: '4%',
            bottom: 1,
            children: [
                {
                    type: 'rect',
                    z: 100,
                    left: 'left',
                    top: 'middle',
                    shape: {
                        width: 20,
                        height: 10
                    },
                    style: {
                        fill: '#232323',
                        stroke: '#232323',
                        lineWidth: 1,
                        shadowBlur: 8,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                        shadowColor: 'rgba(0,0,0,0.3)'
                    }
                },
                {
                    type: 'text',
                    z: 100,
                    left: 'left',
                    top: 'middle',
                    style: {
                        fill: '#e4bfad',
                        text: [
                           '数据来源：立鼎产业研究中心、观研报告网、公开数据整理'
                        ].join('\n'),
                        font: '12px Microsoft YaHei'
                    }
                }
            ]
        }
    ],
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 2,
          borderColor: '#464646'
        }
      },
      axisLine: {
        
        lineStyle: {
           
          width: 40
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: true
      },
      axisLabel: {
          textStyle:{
            color:'#e4bfad',
         },
        show: true,
        distance: 50
      },
      data: gaugeData,
      title: {
        fontSize: 14
      },
      detail: {
        width: 50,
        height: 14,
        fontSize: 14,
        color: 'auto',
        borderColor: 'auto',
        borderRadius: 20,
        borderWidth: 1,
        formatter: '{value}%'
      }
    }
  ]
};
setInterval(function () {
  gaugeData[0].value = +(Math.random() * 100).toFixed(2);
  gaugeData[1].value = +(Math.random() * 100).toFixed(2);
  gaugeData[2].value = +(Math.random() * 100).toFixed(2);
  myChart.setOption({
    series: [
      {
        data: gaugeData,
        pointer: {
          show: false
        }
      }
    ]
  });
}, 1000);

if (option && typeof option === 'object') {
    myChart.setOption(option);
}