echart绘制进度条、仪表盘、各种样式的折线图、饼图、环形图、地图等

1、进度条

 关键option: 

chart.setOption({
        backgroundColor: '',
        title: [
          {
            text:'使用率',
            x: 'center',
            top: '80%',
            textStyle: {
              color: '#B2D4F4',
              fontSize: 15,
            }
          },
          {
            text: '59%',
            x: 'center',
            top: '40%',
            textStyle: {
              fontSize: '30',
              color: '#B2D4F4',
              fontFamily: 'Lato',
              foontWeight: '600'
            }
          }
        ],
        polar: {
          radius: ['49%', '60%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 65,
            showBackground: true,
            backgroundStyle: {
              color: '#405371'
            },
            data:59,
            coordinateSystem: 'polar',

            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: this.settingOption.color[1]
                  },
                  {
                    offset: 1,
                    color: this.settingOption.color[0]
                  }
                ])
              }
            }
          }
        ]
      })

2、仪表盘