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 必须把路径写全。