vue项目如何结合百度echarts生成图表

vue项目开发中经常会用到百度echarts，那么我们需要安装哪些脚手架呢？下面编程教程网小编给大家简单介绍一下！

安装脚手架

npm install echarts --save

全局引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

创建图表

<template>
 <div>
   <div class="charts">
    <div id="bar" style="height: 350px;"></div>
   </div>
 </div>
</template>
<script>
// 引入基本模板,按需加载
let echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default {
 mounted(){
   this.drawBar();
 },
 methods:{
   drawBar(){
    let bar = echarts.init(document.getElementById('bar'));
    // 绘制图表
    bar.setOption({
      tooltip: {
       trigger: 'item',
       formatter: '{a} <br/>{b} : {c}'
      },
      legend: {
       left: 'center',
       data: ['本年', '上年'],
       bottom:0
      },
      xAxis: {
       type: 'category',
       name: 'x',
       splitLine: {show: false},
       data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      grid: {
       left: '1%',
       right: '2%',
       bottom: '8%',
       containLabel: true
      },
      yAxis: {
       type: 'category',
       name: 'y',
       splitLine: {show: true},
       data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']
      },
      series: [
       {
       name: '本年',
       type: 'line',
       data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
       },
       {
       name: '上年',
       type: 'line',
       data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
       },
      ]
    })
   },
 }
}
</script>