vue导入Echarts

vue导入Echarts

1. 安装Echarts

   npm install echarts --save
   // 或
   yarn add echarts --save
   

2. 在main.js中全部引用(全局引用)

   import echarts form 'echarts'
   vue.prototype.$echarts = echarts
   

   // 使用
   <template>
   	<div ref="chart" style="width:100%;height:376px"></div>
   </template>
   <script>
   	export default {
           data() {},
           mounted() {
               this.init()
           },
           methods: {
               init() {
                   const chart = this.$echarts.init(this.$refs.chart)
                   chart.setOption(option) // 配置对象,详见https://echarts.apache.org/zh/option.html
               }
           }
       }
   </script>
   
   
   

3. 单页面引用

   <template>
   	<div ref="chart" style="width:100%;height:376px"></div>
   </template>
   <script>
       import chart form 'echarts'
   	export default {
           data() {},
           mounted() {
               this.init()
           },
           methods: {
               init() {
                   const chart = chart.init(this.$refs.chart)
                   chart.setOption(option) // 配置对象,详见https://echarts.apache.org/zh/option.html
               }
           }
       }
   </script>