Echarts 的安装

在Echarts 官网中下载依赖 npm install echarts --save

Echarts 的引入

在main.js 里面引入 Vue.prototype.$echarts = echarts
                    import echarts from 'echarts'

Echarts 在项目中的应用

1.在vue 中 <template><template> 新建一个div 容器
    <div id="myChart" :style="{width: '500px', height: '500px'}"></div>
2.在methods 方法中引入需要图表
3.定义一个方法
drawLine() {
    !!!需要获取div容器 可通过ID获取div 容器
  // 基于准备好的dom，初始化echarts实例
  let myChart = this.$echarts.init(document.getElementById("myChart"));
  // 绘制图表
  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: "vertical",
      left: 10,
      data: ["考点专练", "套卷练习", "仿真拟考"]
    },
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "30",
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 0, name: "考点专练" ,itemStyle: { color: 'orange' }},
          { value: 0, name: "套卷练习" ,itemStyle: { color: '#66CDAA' }},
          { value: 0, name: "仿真拟考" ,itemStyle: { color: '#C1FFC1' }},
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  4.在生命周期里面调用此方法
  mounted(){
      this.drawLine ()  调用方法后才能生效
  }
  5. 图表里面的颜色可以进行更改
   data: [
          { value: 0, name: "考点专练" ,itemStyle: { color: 'orange' }},
          { value: 0, name: "套卷练习" ,itemStyle: { color: '#66CDAA' }},
          { value: 0, name: "仿真拟考" ,itemStyle: { color: '#C1FFC1' }},
        ]
        itemStyle :更改自己需要的颜色
    6.添加更多的数据
    legend: {
      orient: "vertical",
      left: 10,
      data: ["考点专练", "套卷练习", "仿真拟考"]
                里面可以添加更多数据 ["考点专练", "套卷练习", "仿真拟考","练习","数据",.....]
    },
    需要同步 data: [
          { value: 0, name: "考点专练" ,itemStyle: { color: 'orange' }},
          { value: 0, name: "套卷练习" ,itemStyle: { color: '#66CDAA' }},
          { value: 0, name: "仿真拟考" ,itemStyle: { color: '#C1FFC1' }},
          { value: 0, name: "练习" ,itemStyle: { color: 'red' }},
          { value: 0, name: "数据" ,itemStyle: { color: '#yellow' }},
        ]
        这就是简单的Echarts 柱状图的小demo