vue-cli 项目当中使用echarts 柱状图 和饼图 区别与相同之处

#@这个示例使用 vue-cli 脚手架搭建

#安装echarts依赖

npm install echarts -S

1
main.js 里引入（我在当前页面用了 没有用此步骤）

import echarts from ‘echarts’

Vue.prototype.$echarts = echarts

可以看看上一个博客详细
原文链接：https://blog.csdn.net/IT13333/article/details/118607681
下面这代码直接复制到你想创建的页面就ok

<template>
  <div>
    66666
    <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>1111111111
    <div id="myChart2" :style="{ width: '300px', height: '300px' }"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')

// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入饼图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  // name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      flog: true
    }
  },
  mounted () {
    this.drawLine()
    this.drawLine2()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))

      console.log(myChart.setOption)
      myChart.setOption({
        title: { text: 'ECharts 入门示例',
          x: 'center' },
        tooltip: {},
        xAxis: {
          data: [ '衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子' ]
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [ 5, 20, 36, 10, 10, 20 ]
          }
        ]
      })
    },
    drawLine2 () {
      let myChart2 = echarts.init(document.getElementById('myChart2'))
      // 绘制图表

      myChart2.setOption({
        title: {
          // 标题
          text: '天气情况统计',
          // 副标题
          subtext: '虚构数据',

          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: [ '西凉', '益州', '兖州', '荆州', '幽州' ]
        },
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: [ '50%', '50%' ],
            selectedMode: 'single',
            data: [
              {
                value: 1545,
                name: '幽州'
              },
              { value: 755,
                name: '荆州' },
              { value: 510,
                name: '兖州' },
              { value: 454,
                name: '益州' },
              { value: 335,
                name: '西凉' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

有用，用到了点赞