在webpack中使用echarts

可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。

可以直接在项目代码中 require('echarts') 得到 ECharts。

在vue项目中的示例代码如下:

<template>
  <div id="barChart" style="width:30%;height:400px"></div>
</template>
<script>
import { Message } from 'element-ui'
export default {
  name: 'WpVistorStatistic',
  components: {

  },
  data() {
    return {

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 页面初始化
    init() {
      this.handleQuery()
    },
    handleQuery() {
      var echarts = require('echarts');

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('barChart'));
      // 绘制图表
      myChart.setOption({
          title: {
              text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      });
    }
  }
}
</script>
<style scoped>

</style>

即可显示条形图。

 

上面的代码的要点为：

1.整个vue文件由template、script和style构成。

2.需要给barChart设置宽高。

3.需要加载echarts，并进行初始化，然后设置图表里面的内容。