Vue中 echarts vue-echarts的使用 不显示图形

5,331 阅读1分钟

mian.js

import echarts from 'echarts'
import "echarts/lib/component/legend"
Vue.prototype.echarts = echarts

组件中

 let ec = this.echarts.init(document.getElementById("ec"))
   
    ec.setOption(this.option)

webpack按需加载,没用引入dataset组件所以不能显示, require("echarts/lib/component/dataset"); 这么引入后就可以是正常使用了

vue-echarts的使用 mian.js

import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
Vue.component('chart', ECharts)

组件中

<template>
  <div>
    <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
  </div>
</template>
 data(){
    return{
      orgOptions:{
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
           }]
        }
     }
    }