echarts一些圖形的配置

1.餅狀玫瑰圖

chartOption = {
    graphic: [
      {
        type: 'circle',
        left: 'center',
        top: 'center',
        shape: {
          cx: 0,
          r: 42
        },
        style: {
          fill: 'transparent',
          stroke: '#01d2d8',
          lineWidth: 4,

        }
      },
      {
        type: 'text',
        top: 'center',
        left: 'center',
        style: {
          text: '佔比',
          font: '28px "STHeiti", sans-serif',
          fill: '#fff'
        }
      }
    ],
    color: ['#ff9812', '#fff100', '#00e4ff', '#b154ff', '#00ffb3', '#ff647c'],
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    series: [
      {
        name: '半徑模式',
        type: 'pie',
        radius: [50, 180],
        center: ['50%', '50%'],
        roseType: 'radius',
        label: {
          show: true,
          color: '#ffffff',
          fontSize: 18,
          padding: 5
        },
        labelLine: {
          show: true,
          lineStyle: {
            width: 2
          }
        },
        data: [
          { value: 10, name: '公安' },
          { value: 5, name: '稅務' },
          { value: 15, name: '人力資源' },
          { value: 25, name: '工商' },
          { value: 20, name: '交通' },
          { value: 35, name: '國土' }
        ]
      },
    ]
  };

2.面積圖

chartOption = {
    xAxis: {
      type: 'category',
      axisLabel: { // x軸文字
        color: '#ffffff',
        margin: 18,
        fontSize: 18,
      },
      axisTick: {
        show: false
      },
      axisLine: { // x軸線
        lineStyle: {
          width: 4,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#0098ff' // 0% 處的顏色
            }, {
              offset: 1, color: '#00fca7' // 100% 處的顏色
            }],
            global: false // 缺省爲 false
          }
        }
      },
      splitLine: { // x軸間隔線
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(255,255,255,0.5)',
          type: 'dashed'
        }
      },
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      axisLabel: { // y軸文字
        color: '#ffffff',
        margin: 18,
        fontSize: 18,
      },
      axisTick: {
        show: false
      },
      splitLine: { // y軸間隔線
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(255,255,255,0.5)',
          type: 'dashed'
        }
      },
      axisLine: { // y軸線
        show: false,
      },
      type: 'value'
    },
    series: [{
      data: [24, 30, 28, 38, 52, 34, 36, 34, 15, 20, 25, 40],
      type: 'line',
      showSymbol: false,
      lineStyle: {
        width: 0
      },
      areaStyle: {
        color: {
          type: 'liner',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(253,138,3,1)' // 0% 處的顏色
          }, {
            offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 處的顏色
          }],
        }
      }
    }]
  };

3.柱狀圖

 chartOption = {
    color: ['#34ACFF', '#00FFA5', '#fff70f', '#445285', '#8e67de', '#e36f7e', '#70c9ca', '#d396c6', '#b09e6c', '#4f58d5', '#96a36f'],
    legend: {
      right: 80,
      textStyle: {
        color: '#fff',
        fontSize: 18
      },
      itemHeight: 5,
      itemWidth: 23,
      itemGap: 20
    },
    tooltip: {},
    dataset: {
      dimensions: ['name', '2015年', '2016年', '2017年'],
      source: [
        { name: '公安', '2015年': 43, '2016年': 85, '2017年': 93 },
        { name: '國土', '2015年': 83, '2016年': 73, '2017年': 55 },
        { name: '稅務', '2015年': 86, '2016年': 65, '2017年': 82 },
        { name: '交通', '2015年': 72, '2016年': 113, '2017年': 39 },
        { name: '社保', '2015年': 72, '2016年': 53, '2017年': 139 },
        { name: '人力資源', '2015年': 76, '2016年': 59, '2017年': 56 }
      ]
    },
    xAxis: {
      type: 'category',
      z:100,
      axisLine: {
        lineStyle: {
          color: "#00cfce",
          width: 4
        }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#fff',
        fontSize: 22,
        margin: 15
      }
    },
    yAxis: {
      name: '（單位：千件）',
      nameGap: 30,
      nameTextStyle: {
        color: '#fff',
        fontSize: 14
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: '#fff',
        fontSize: 22
      },
      splitLine: {
        show: false,
      }
    },
    series: [
      {
        type: 'bar',
        barWidth: 15,
        barGap: '50%',
        itemStyle: {
          barBorderRadius: [7, 7, 0, 0]
        }

      },
      {
        type: 'bar',
        barWidth: 15,
        barGap: '50%',
        itemStyle: {
          barBorderRadius: [7, 7, 0, 0]
        }
      },
      {
        type: 'bar',
        barWidth: 15,
        barGap: '50%',
        itemStyle: {
          barBorderRadius: [7, 7, 0, 0]
        }
      }
    ]
  };

4.雷達圖

chartOption = {
    tooltip: {},
    radar: {
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 22,
          borderRadius: 3,
          padding: [3, 5]
        }
      },
      axisLine: {
        show: true,
        symbol: "arrow",
        symbolSize: [5, 3]
      },
      splitLine: {
        show: true,
        lineStyle: {
          opacity: 0.5
        }
      },
      splitArea: {
        show: false
      },
      indicator: [
        { name: '公安', max: 1 },
        { name: '國土', max: 1 },
        { name: '交通', max: 1 },
        { name: '工商', max: 1 },
        { name: '人力資源', max: 1 },
        { name: '稅務', max: 1 }
      ]
    },
    series: [{
      type: 'radar',
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: {
        normal: {
          color: "#fff70f", // 圖表中各個圖區域的邊框線拐點顏色
        }
      },
      label: {
        show: true,
        color: '#fff70f',
        fontSize: 16,
        z: 100
      },
      lineStyle: {
        color: '#34acff'
      },
      areaStyle: {
        color: 'rgba(0, 255, 165, 0.3)'
      },
      data: [
        {
          value: [0.8, 0.6, 0.76, 0.8, 0.67, 0.9],
          name: '公衆滿意度'
        }
      ]
    }]

5.餅圖

option = {
    graphic: [
            {
                type: 'circle',
                left: 'center',
                top: 'center',
                shape: {
                    cx: 0,
                    r: 70
                },
                style: {
                    fill: 'transparent',
                    stroke: '#fff',
                    lineWidth: 2,

                }
            },
            {
                type: 'text',
                top: 'center',
                left: 'center',
                style: {
                    text: "屬性",
                    font: '3rem "STHeiti", sans-serif',
                    fill: '#fff'
                }
            }
        ],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            textStyle: {
                fontSize: 20,
            }
        },
        color: ['#B4FBC0', '#F9E251', '#8AD2FB', '#2F6FF5', '#679899'],
        legend: {
            orient: 'vertical',
            right: '10px',
            top: '1px',
            textStyle: {
                color: '#999999',
                fontSize: 35,
            },
            data: [
                {name: "住宅", icon: "image://../assets/images/hgy_fangwu_1.png"},
                {name: "商住", icon: "image://../assets/images/hgy_fangwu_2.png"},
                {name: "商用", icon: "image://../assets/images/hgy_fangwu_3.png"}
            ],
            itemWidth: 19,
            itemHeight: 19,
        },
        series: [
            {
                name: '社區人口年齡結構統計',
                type: 'pie',
                radius: ['50%', '80%'],
                avoidLabelOverlap: false,
                legendHoverLink: false,
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    { name: '20歲以下', value: 20 },
                    { name: '20-30歲', value: 40 },
                    { name: '30-40歲', value: 50 },
                    { name: '40-50歲', value: 60 },
                    { name: '60歲以上', value: 70 }
                ]
            }
        ]
};