vue项目中使用echarts

vue-cli创建的项目中

1.安装echarts依赖

cnpm install echarts -S

2.在需要创建图表的页面中按需引入

<div class="chart" ref="chartOne" :style="{width: '300px', height: '300px'}"></div>

<script type="text/ecmascript-6">
  //引入Echarts主模块
  let echarts=require('echarts/lib/echarts');
  //引入柱状图
  require('echarts/lib/chart/bar');
  //引入圆饼图
  require('echarts/lib/chart/pie');
  //引入所需组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/legend');

  export default {
    data () {
      return {}
    },
    methods:{
      /*创建图表一*/
      createChartOne(){
        let chartOne=echarts.init(this.$refs.chartOne);

        chartOne.setOption({
          title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        })
      }
    },
    mounted(){
      this.createChartOne();
    },
  }
</script>

这里之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全。