Vue中使用echarts的步骤

1.安装npm install echarts --save
2.在main.js中引入
2.1 import echarts from ‘echarts’
2.2 挂载到vue原型上
Vue.prototype.$echarts = echarts
3.上代码实现一个柱状图（改成折线图只需将type改成line）

<template>
  <div>
    <div id="main" style="width: 600px;height:400px;">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      option: {
        title: { // 图表标题
          text: '柱状图', // 图表标题文本
          x: '400px' // 改变标题在x轴的位置
        },
        tooltip: {}, // 提示框组件
        legend: {
          data: ['销量']
        },
        grid: { // 在该属性下可以设置图标的大小，相对于dom节点（该组件中id为main的div）的位置
          right: 0,
          top: 30,
          width: '50%',
          height: '60%'
        },
        xAxis: { // 直角坐标系 X 轴
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // 横轴数据
        },
        yAxis: {}, // 直角坐标系 Y 轴
        series: [{
          name: '销量',
          type: 'bar', // 图表类型line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）
          data: [5, 20, 36, 10, 10, 20] // 纵轴数据
        }]
      }
    }
  },
  mounted () {
    const myChart = this.$echarts.init(document.getElementById('main'))
    myChart.setOption(this.option)
  }
}
</script>

<style>

</style>

上代码实现一个饼状图
<template>
  <div>
    <div id="main" style="width: 600px;height:400px;">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      option: {
        series: [
          {
            name: '访问来源',
            type: 'pie', // 图标类型为饼状图
            color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], // 也可以改变图标颜色
            radius: '50%', // 图表大小占dom节点的百分比
            roseType: 'angle', // 设置为南丁格尔图
            labelLine: { // 设置视觉引导线颜色
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.3)'
              }
            },
            label: { // 设置系列文本颜色
              textStyle: {
                color: 'rgba(255, 0, 255, 0.3)'
              }
            },
            itemStyle: { // 设置图标背景阴影
              // color: 'skyblue', // 改变图标颜色
              // 阴影的大小
              shadowBlur: 400,
              // 阴影水平方向上的偏移
              shadowOffsetX: 0,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            data: [
              { value: 635, name: '视频广告' },
              { value: 274, name: '联盟广告' },
              { value: 310, name: '邮件营销' },
              { value: 335, name: '直接访问' },
              { value: 400, name: '搜索引擎' }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    const myChart = this.$echarts.init(document.getElementById('main'))
    myChart.setOption(this.option)
  }
}
</script>

<style>

</style>