0
点赞
收藏
分享

微信扫一扫

echarts各种图示例及转换方法

静悠 2022-03-12 阅读 69
echartsjavascriptvue.js
// 折线图数据示例


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()
        }
      },
      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'] }
    }
  }
},
// 柱状图数据示例


histogramOption: {
  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],
      color: '#5087EC',
      type: 'bar'
    }
  ],
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      // restore: { show: true },
      myTool1: {
        show: true,
        title: '转为折线图',
        icon: ('image://' + require('@/assets/svg/lineChart.png')),
        onclick: () => {
          this.myTool1()
        }
      },
      myTool2: {
        show: true,
        title: '转为条形图',
        icon: ('image://' + require('@/assets/svg/barChart.png')),
        onclick: () => {
          this.myTool2()
        }
      },
      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'] }
    }
  }
},
// 雷达图数据示例


radarMapOption: {
  title: {
    text: ''
  },
  // legend: {
  //   data: ['兼职心理老师原职务/任教分布情况']
  // },
  tooltip: {
    trigger: 'item',
    extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '文章', max: 10 },
      { name: '文档', max: 10 },
      { name: '视频', max: 10 },
      { name: '图片', max: 10 },
      { name: '压缩包', max: 10 }
    ]
  },
  series: [
    {
      name: '资源格式上传情况',
      type: 'radar',
      color: '#5087EC',
      data: [
        {
          value: [],
          name: '资源格式上传情况'
        }
      ]
    }
  ],
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      // restore: { show: true },
      myTool1: {
        show: true,
        title: '转为折线图',
        icon: ('image://' + require('@/assets/svg/lineChart.png')),
        onclick: () => {
          this.myTool1()
        }
      },
      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()
        }
      },
      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'] }
    }
  }
},
// 饼图数据示例

pieOption: {
  title: {
    text: '',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  color: ['#45C2E0', '#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'],
  series: [
    {
      name: '',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' },
        { value: 580, name: 'C' },
        { value: 484, name: 'D' },
        { value: 300, name: 'E' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ],
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      // restore: { show: true },
      myTool1: {
        show: true,
        title: '转为折线图',
        icon: ('image://' + require('@/assets/svg/lineChart.png')),
        onclick: () => {
          this.myTool1()
        }
      },
      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()
        }
      },
      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'] }
    }
  }
},
// 热词图数据示例
hotWordOption: {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'item',
    extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
  },
  series: [{
    type: 'wordCloud',
    gridSize: 20,
    sizeRange: [12, 50],
    rotationRange: [-90, 90],
    shape: 'pentagon',
    textStyle: {
      normal: {
        color: function () {
          return 'rgb(' + [
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160)
          ].join(',') + ')'
        }
      },
      emphasis: {
        shadowBlur: 10,
        shadowColor: '#333'
      }
    },
    data: [
      { name: '许嵩', value: 15000 },
      { name: '周杰伦', value: 16181 },
      { name: '汪苏泷', value: 4386 },
      { name: '徐良', value: 2055 },
      { name: '汪峰', value: 6467 },
      { name: '王菲', value: 6244 },
      { name: '萧敬腾', value: 6898 },
      { name: '许巍', value: 8484 },
      { name: '胡歌', value: 11112 },
      { name: '迪卡普里奥', value: 9112 },
      { name: '李小龙', value: 18112 },
      { name: '成龙', value: 14312 }
    ]
  }],
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      // restore: { show: true },
      myTool1: {
        show: true,
        title: '转为折线图',
        icon: ('image://' + require('@/assets/svg/lineChart.png')),
        onclick: () => {
          this.myTool1()
        }
      },
      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()
        }
      },
      saveAsImage: {
        show: true,
        pixelRatio: 1,
        title: '保存为图片',
        type: 'png',
        lang: ['点击保存'],
        name: '数据统计图表'
      }
      // magicType: { type: ['line', 'bar'] }
    }
  }
}

转换方法：

// 折线图
    myTool1 (id) {
      var chart1 = this.$echarts.init(document.getElementById(id))
      // 绘制图表
      chart1.clear()
      chart1.setOption({
        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(id)
              }
            },
            myTool3: {
              show: true,
              title: '转为柱状图',
              icon: ('image://' + require('@/assets/svg/histogram.png')),
              onclick: () => {
                this.myTool3(id)
              }
            },
            myTool4: {
              show: true,
              title: '转为雷达图',
              icon: ('image://' + require('@/assets/svg/radarMap.png')),
              onclick: () => {
                this.myTool4(id)
              }
            },
            myTool5: {
              show: true,
              title: '转为饼图',
              icon: ('image://' + require('@/assets/svg/pieEcharts.png')),
              onclick: () => {
                this.myTool5(id)
              }
            },
            myTool6: {
              show: true,
              title: '转为热词图',
              icon: ('image://' + require('@/assets/svg/hotWord.png')),
              onclick: () => {
                this.myTool6(id)
              }
            },
            saveAsImage: {
              show: true,
              pixelRatio: 1,
              title: '保存为图片',
              type: 'png',
              lang: ['点击保存'],
              name: '数据统计图表'
            }
            // magicType: { type: ['line', 'bar'] }
          }
        }
      })
    },
举报

相关推荐

echarts地图示例

前端Vue3

PLC接线图示例

listc++硬件工程Linux系统/运维

各种表单验证及方法

html5vue.jselementui前端

frp使用教程：安装及各种配置示例

网络linuxfrp内网客户端Html/CSS前端开发

byte[]与各种数据类型互相转换示例

Systemi++JAVAJavaScript前端开发

QCustomPlot QCPBars横向柱状图示例

QCustomPlotQCPBars柱状图图例sedHtml/CSS前端开发

海量逻辑架构图示例

系统设计交互方式系统维护Python后端开发

QCustomPlot QCPBars纵向柱状图示例

QCustomPlotQCPBars柱状图图例sedPython后端开发

Java 各种文件类型转换的方法

java后端

前端ECharts框架绘制各种图形

Web 前端总结htmljavascript折线Html/CSS前端开发
0 条评论