Vue 整合 Echarts 并使用饼图、柱形图 ...

1. 使用Vue手脚架(Vue CLI)创建一个Vue项目

   • 在此之前你需要安装node.js（官网：http://nodejs.cn/）。
   • 打开命令提示符(CMD)
   • 运行命令：vue create demo - demo是你的项目名，可以修改。
   • 按照提示创建项目。

2. 安装Echarts依赖

   • Echarts官网：https://www.echartsjs.com/zh/index.html
   • 在cmd中进入项目根路径。
   • 运行命令：npm install echarts --save

3. 整合Echarts

   • 打开项目文件的入口js文件main.js(项目/src/main.js)。
   • 添加下文部分

     import echarts from 'echarts'
     Vue.prototype.$echarts = echarts
     

4. 写一个demo

   • 在页面js头部添加以下代码(script 之下 export default 之上)

     // 引入基本模板
     // let echarts = require('echarts/lib/echarts')
     // 引入柱状图组件
     require('echarts/lib/chart/bar')
     // 引入提示框和title组件
     require('echarts/lib/component/tooltip')
     require('echarts/lib/component/title')
     

   • 在页面定义一个div,并添加一个Id以及宽高。
     <div id="myChart1" :style="{width: '500px', height: '400px'}"></div>
     • Id为Echarts渲染时所需要的
     • 宽高如果不设置则页面将不会显示
   • 在页面DOM加载完成后渲染Echarts图表

       mounted(){
         // 需要在页面DOM加载完成后加载图表
         this.initEcharts()
       },
       methods: {
         initEcharts() {
           // 基于准备好的dom，初始化echarts实例
           let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
           let dataAxis = ['在用', '待修', '在修', '备用', '调剂', '闲置', '待报废', '报废', '丢失', '归档', '其他'];
           let data = [
             { value: 54, name: '在用' },
             { value: 6, name: '待修' },
             { value: 3, name: '在修' },
             { value: 10, name: '备用' },
             { value: 10, name: '调剂' },
             { value: 2, name: '闲置' },
             { value: 5, name: '待报废' },
             { value: 7, name: '报废' },
             { value: 6, name: '丢失' },
             { value: 4, name: '归档' },
             { value: 8, name: '其他' }
           ]
           myChart1.setOption({
             title: {
               text: '资产总数(类型别)',
               x: '300px'
             },
             tooltip: {
               trigger: 'item',
               formatter: "{a} <br/>{b} : {c} ({d}%)"
             },
             legend: {
               orient: 'vertical',
               left: 'left',
               data: dataAxis
             },
             series: [{
               name: '资产数量',
               type: 'pie',
               radius: '55%',
               center: ['55%', '47%'],
               label: {
                 normal: {
                   formatter: '{b}:{d}%',
                   textStyle: {
                     fontWeight: 'normal',
                     fontSize: 15
                   }
                 }
               },
               data: data,
               itemStyle: {
                 emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               }
             }]
           })
         }
       }