echarts各种图示例及转换方法

// 折线图数据示例

lineOption: {
  tooltip: {
    trigger: 'axis',
    extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
  },
  calculable: true,
  xAxis: {
    type: 'category',
    data: ['培训课件', '课程', '晒课资源', '参赛资源', '案例'],
    axisLabel: { rotate: -25 }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      data: [2.6, 5.9, 9.0, 26.4, 28.7],
      type: 'line',
      color: '#5087EC'
      // 线条是否平滑
      // smooth: true
    }
  ],
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      // restore: { show: true },
      myTool2: {
        show: true,
        title: '转为条形图',
        icon: ('image://' + require('@/assets/svg/barChart.png')),
        onclick: () => {
          this.myTool2()
        }
      },
      myTool3: {
        show: true,
        title: '转为柱状图',
        icon: ('image://' + require('@/assets/svg/histogram.png')),
        onclick: () => {
          this.myTool3()
        }
      },
      myTool4: {
        show: true,
        title: '转为雷达图',
        icon: ('image://' + require('@/assets/svg/radarMap.png')),
        onclick: () => {
          this.myTool4()
        }
      },
      myTool5: {
        show: true,
        title: '转为饼图',
        icon: ('image://' + require('@/assets/svg/pieEcharts.png')),
        onclick: () => {
          this.myTool5()
        }
      },
      myTool6: {
        show: true,
        title: '转为热词图',
        icon: ('image://' + require('@/assets/svg/hotWord.png')),
        onclick: () => {
          this.myTool6()
        }
      },
      saveAsImage: {
        show: true,
        pixelRatio: 1,
        title: '保存为图片',
        type: 'png',
        lang: ['点击保存'],
        name: '数据统计图表'
      }
      // magicType: { type: ['line', 'bar'] }
    }
  }
},

// 条形图数据示例

barOption: {
  title: {
    // text: '专职 vs 兼职'
  },
  tooltip: {
    trigger: 'axis',
    extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
  },
  calculable: true,
  xAxis: [
    {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: []
    }
  ],
  series: [
    {
      name: '',
      type: 'bar',
      color: '#5087EC',
      data: []
      // ,
      // 显示最大最小值图标
      // markPoint: {
      //   data: [
      //     { type: 'max', name: 'Max' },
      //     { type: 'min', name: 'Min' }
      //   ]
      // }
      // ,
      // markLine: {
      //   data: [{ type: 'average', name: 'Avg' }]
      // }
    }
  ],
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      // restore: { show: true },
      myTool1: {
        show: true,
        title: '转为折线图',
        icon: ('image://' + require('@/assets/svg/lineChart.png')),
        onclick: () => {
          this.myTool1()