jl15988 / echartsMixins

通用echarts图表生成混入,实现快速生成echarts图表,并实现随窗口变化,可通过自定义其他操作

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

echartsMixins

通用echarts图表生成混入,实现快速生成echarts图表,并实现随窗口变化,可通过自定义其他操作

使用

<template>
  <div>
    <div id="sex-echarts" style="height: 300px"></div>
    <div id="income-echarts" style="height: 300px"></div>
  </div>
</template>
<script>
import echartsMixins from './echartsMixins'
export default {
  mixins: [echartsMixins], // 混入echartsMixins
  methods: {
    /** 生成饼图 */
    createPieChart() {
      this.renderPieChart('性别', 'sex-echarts', [{name: "", value: 10}, {name: "", value: 6}], ['#409EFF', '#F56C6C'])
    },
    /** 生成折线图 */
    createLineChart() {
      this.renderLineChart('income-echarts', ["星期一","星期二"], [{name: "收入", data: [100, 60]}, {name: "支出", data: [30, 20]}], ['#37cc8f', '#fa904e'])
    },
    /** 自定义操作 */
    customActions() {
      for (let id in this.myCharts) {
        // 重新适应图表大小
        this.myCharts[id].resize()
      }
      // ...可以通过this.myCharts进行更多的操作
    }
  }
}
</script>

About

通用echarts图表生成混入,实现快速生成echarts图表,并实现随窗口变化,可通过自定义其他操作

License:MIT License


Languages

Language:JavaScript 100.0%