vue使用echarts

Posted 2020-11-03 微笑

1.安装echarts

npm install echarts -S

2.在main.js中引用echarts

import echarts from ‘echarts‘
Vue.prototype.$echarts = echarts

3.封装chart组件

在components中新建chart.vue

<template>
    <div class="chart">
        <div class="chart" :id="id" :option="option"></div>
    </div>
</template>

<script>
    export default {
        props: {
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },
        mounted () {
            this.$echarts.init(document.getElementById(this.id)).setOption(this.option)  
        }
    }
</script>

<style scoped>

</style>

4.其他组件调用图表组件

<template>
  <div class="hello">
    <Chart :id="id" :option="pieOption"></Chart>
  </div>
</template>

<script>
import Chart from ‘./Chart‘
export default {
  name: ‘HelloWorld‘,
  components: {
    Chart
  },
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘,
      id: ‘pie‘,
      pieOption: {
          tooltip : {  
                    trigger: ‘item‘,  
                    formatter: "{a} <br/>{b} : {c} "  
                },  
          calculable : false,  
          series : [  
            {  
                name: ‘‘,  
                type: ‘pie‘,  
                radius: ‘45%‘, //饼图的半径大小  
                center: [‘40%‘, ‘60%‘], //饼图的位置  
                label: {show:true},
                labelLine: {show: true, length: 0},    
                data:[
                    {
                        value: 20, name: ‘余‘
                    },
                    {
                        value: 20, name: ‘已开‘
                    },
                ]
            }  
          ] 
      }
    }
  }
  }
}
</script>