Echarts在线免费图表

 
            option = {
   tooltip: {
      trigger: 'axis',
      renderMode: 'richText',
      confine: true,
      extraCssText: 'z-index: 9999',
      textStyle: {
         textShadowColor: 'transparent',//文字块背景阴影颜色
         textShadowBlur: 10,//文字块的背景阴影长度
      }
   },
   grid: {
      top: '25%',
      left: '2%',
      right: '2%',
      bottom: '5%',
      containLabel: true
   },
   legend: {
      data: ['在线', '离线', '在线率'],
      x: 'center',
      top: '10%',
      orient: 'horizontal',
      itemWidth: 16,
      itemHeight: 12
   },
   xAxis: [
      {
         type: 'category',
         axisLine: {
            onZero: false,
            lineStyle: {
               color: "#e5e5e5"
            }
         },
         axisLabel: { //坐标轴字体颜色
            textStyle: {
               color: '#999999'
            }
         },
         axisTick: { //y轴刻度线
            show: false
         },
         splitLine: { //网格
            show: false,
         },
         data: ['广州市', '深圳市', '珠海市', '汕头市', '佛山市', '东莞市'],
      }
   ],
   yAxis: [
      {
         name: '台数',
         type: 'value',
         max: 100,
         axisLabel: { //坐标轴字体颜色
            textStyle: {
               color: '#9eaaba'
            }
         },
         splitLine: { //网格
            show: true,
            lineStyle: {
               color: '#dadde4',
               type: "dashed"
            }
         }
      },
      {
         name: '在线率',
         min: 1,
         max: 100,
         type: 'value',
         axisLabel: { //坐标轴字体颜色
            textStyle: {
               color: '#9eaaba'
            }
         },
         axisTick: { //y轴刻度线
            show: false
         },
         splitLine: { //网格
            show: false
         }
      }
   ],
   series: [
      {
         name: '在线',
         type: 'bar',
         barWidth: 14, //柱子宽度
         itemStyle: { //柱子颜色
            normal: {
               color: '#00BA56',
               borderRadius: 14
            }
         },
         data: [95, 85, 79, 93, 88, 91]
      },
      {
         name: '离线',
         type: 'bar',
         barWidth: 14, //柱子宽度
         itemStyle: { //柱子颜色
            normal: {
               color: '#FE3737',
               borderRadius: 10
            }
         },
         data: [5, 15, 21, 7, 12, 9]
      },
      {
         name: '在线率',
         type: 'line',
         symbolSize: 6,
         yAxisIndex: 1,
         lineStyle: {
            color: '#2163E0',
            width: 3
         },
         itemStyle: {
            borderColor: '#2163E0',
            borderWidth: 5
         },
         data: [95, 85, 79, 93, 88, 91]
      }]
};