vuejs中使用echart图表

首先安装echart

npm i echarts -S

加下来以使用这个图表为例

在vue组件中像这样使用：

<template>

  <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart">

  </div>

</template>

<script>

import echarts from 'echarts'

export default {

  props: {

    className: {

      type: String,

      default: 'yourClassName'

    },

    id: {

      type: String,

      default: 'yourID'

    },

    width: {

      type: String,

      default: '500px'

    },

    height: {

      type: String,

      default: '500px'

    }

  },

  data() {

    return {

      chart: null

    }

  },

  mounted() {

    this.initChart();

  },

  beforeDestroy() {

    if (!this.chart) {

      return

    }

    this.chart.dispose();

    this.chart = null;

  },

  methods: {

    initChart() {

      this.chart = echarts.init(this.$refs.myEchart);

      // 把配置和数据放这里

      this.chart.setOption({

        color: ['#3398DB'],

        tooltip: {

          trigger: 'axis',

          axisPointer: { // 坐标轴指示器，坐标轴触发有效

            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

          }

        },

        grid: {

          left: '3%',

          right: '4%',

          bottom: '3%',

          containLabel: true

        },

        xAxis: [{

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisTick: {

            alignWithLabel: true

          }

        }],

        yAxis: [{

          type: 'value'

        }],

        series: [{

          name: '直接访问',

          type: 'bar',

          barWidth: '60%',

          data: [10, 52, 200, 334, 390, 330, 220]

        }]

      })

    }

  }

}

</script>

如果是异步获取的数据，比如用axios,那只需要把配置项放到then方法后面：

    initChart() {

      this.chart = echarts.init(this.$refs.myEchart);

      // 把配置和数据放这里

      this.axios.get('/url').then((data) => {

      	this.chart.setOption({

      	})

      })

    }

巴特西

vuejs中使用echart图表

最新文章

热门文章