echarts的實戰案例一些

這裏是最近的一個大數據項目中會使用的一些特別的eharts案例，基礎用法會略過，只展現使用的echarts的options

國際慣例：
目標樣式：

關鍵詞：柱狀圖、扇形
難點：背景圓的圓周處理（我這裏使用的是計算出和值做爲背景圓的圓周）

// 扇形柱狀圖
function getCircleLineOption(datalist, legendList = []) {
  var series = [];
  var color = ['#1890FF', '#2FC25B', '#E04445', '#FF9800', '#FACC14'];

  let dataStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      shadowBlur: 40,
      shadowColor: 'rgba(40, 40, 40, 0.5)',
    }
  }
  let placeHolderStyle = {
    normal: {
      color: 'rgba(0,0,0,0)',
      label: {
        show: false
      },
      labelLine: {
        show: false
      }
    },
    emphasis: {
      color: 'rgba(0,0,0,0)'
    }
  }

  let sumNum = 0
  datalist.forEach(item => {
    sumNum += item.value
  })


  for (var i = 0; i < datalist.length; i++) {
    var item = datalist[i]
    series.push({
      name: item.name, type: 'pie',
      clockWise: false,
      radius: [74 - i * 15 + '%', 64 - i * 15 + '%'],
      center: ["50%", "42%"],
      itemStyle: dataStyle,
      hoverAnimation: false,
      data: [
        {value: item.value,
          itemStyle: {
            color: color[i]
          },
        },
        {value: (sumNum - item.value)/3,
          name: 'invisible',
          itemStyle: placeHolderStyle,
          hoverAnimation: false,
          tooltip: {
            show: false
        },
        }
      ],
    })
  }

  var option = {
    color: color,
    tooltip: {
      show: true,
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      show: legendList.length ? true : false,
      data: legendList,
      top:'75%',
      itemWidth:5,//圖例的寬度
      itemHeight:10,//圖例的高度
      textStyle:{//圖例文字的樣式
        color:'#fff',
        fontSize:12
      }
    },
    grid: {top: '20%', left: '6%', right: '2%', bottom: '8%', containLabel: true},
    series: series
  };
  return option;
}

目標樣式：

關鍵詞：儀表盤
難點：樣式

// 儀表盤
function getGauOption(datalist) {
  var series = []
  series = [
    {
      name: '推薦度',
      type: 'gauge',
      detail: {
        formatter: '{value}',
        textStyle: {
          color: '#fff',
          fontSize: 12,
        }},
      data: datalist,
      axisLine: { // 座標軸線
        lineStyle: { // 屬性lineStyle控制線條樣式
          color: [
            [datalist[0].value/100, '#1890FF'],//根據實際數據動態改變
            [1, '#666'],
          ],
          width: 10, //半徑
          shadowColor: '#fff', //默認透明
          shadowBlur: 8
        }
      },
      axisLabel: {
        textStyle: { // 屬性lineStyle控制線條樣式
          fontWeight: 'bolder',
          color: 'transparent', //刻度數字顏色 隱藏
          shadowColor: '#fff', //默認透明
          shadowBlur: 10
        }
      },
      axisTick: { // 座標軸小標記
        length: 12, // 屬性length控制線長
        lineStyle: { // 屬性lineStyle控制線條樣式
          color: 'transparent', //座標軸 小刻度線顏色
          shadowColor: '#fff', //默認透明
          shadowBlur: 10
        }
      },
      splitLine: { // 分隔線
        length: 20, // 屬性length控制線長
        lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
          width: 3,
          color: 'transparent', //分割線
          shadowColor: '#fff', //默認透明
          shadowBlur: 10
        }
      },
    }
  ]
  var option = { series: series }
  return option;
}