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;
}