Vue 使用 vue-echarts 图表插件

以前都用的是 echarts 插件，这次的项目要用 vue-echarts 插件。

vue-echarts 和 echarts 的区别：

vue-echarts是封装后的vue插件，基于 ECharts v4.0.1+ 开发，依赖 Vue.js v2.2.6+，功能一样的只是把它封装成vue插件这样更方便以vue的方式去使用它。
echarts就是普通的js库，

vue-echarts特征：

轻量，高效，按需绑定事件
支持按需导入ECharts.js图表和组件
支持组件调整大小事件自动更新视图

git地址：https://github.com/ecomfe/vue-echarts

一、安装：

1、npm（推荐方式）

npm install vue-echarts

2、手动安装

直接下载 dist/vue-echarts.js 并在 HTML 文件中引入：

<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>

3、CDN

在 HTML 文件按如下方式依次引入 echarts 和 vue-echarts：

<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

二、使用方法

用 npm 与 Vue Loader 基于 ES Module 引入（推荐用法）

import Vue from 'vue'
import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue

// 手动引入 ECharts 各模块来减小打包体积
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

// 如果需要配合 ECharts 扩展使用，只需要直接引入扩展包即可
// 以 ECharts-GL 为例：
// 需要安装依赖：npm install --save echarts-gl，并添加如下引用
import 'echarts-gl'

// 注册组件后即可使用
Vue.component('v-chart', ECharts)

注意事项：

Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本，如果你正在使用官方的 Vue CLI 来创建项目，可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置：

1、当使用 Vue CLI 3+ 时，需要在 vue.config.js 中的 transpileDependencies 增加 vue-echarts 及 resize-detector，如下：

// vue.config.js
module.exports = {
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}

2、当使用 Vue CLI 2 的 webpack 模板时，需要按下述的方式修改 build/webpack.base.conf.js：

{
        test: /.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/vue-echarts'),
          resolve('node_modules/resize-detector')
       ]
}

3、webpack 1.x 修改成如下：

{
  test: /.js$/,
  loader: 'babel',
  include: [
　　path.join(prjRoot, 'src'),
　　path.join(prjRoot, 'node_modules/vue-echarts-v3/src')
  ],

  exclude: /node_modules(?![\/]vue-echarts-v3[\/]src[\/])/
},

如果你正直接配置使用 webpack，那么也请做类似的修改使其能够正常工作。

全局变量：

在没有使用任何模块系统的情况下，组件将通过 window.VueECharts 变量暴露接口：

// 注册组件后即可使用
Vue.component('v-chart', VueECharts)

三、调用组件

官方示例代码：

<template>
<v-chart :options="polar"/>
</template>

<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

    return {
      polar: {
        title: {
          text: '极坐标双数值轴'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    }
  }
}
</script>

查看这里了解更多例子。

自定义主题

只要把定义主题样式theme.json文件通过下面方法引入即可：

import theme from '../theme.json'
ECharts.registerTheme('ovilia-green', theme);

饼状图完整示例代码：

<style>
    .echarts {
        width: 100%;
        height: 100%;
    }
</style>

<template>
  <v-chart theme="ovilia-green" :options="polar"/>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import theme from '../theme.json'
ECharts.registerTheme('ovilia-green', theme); //引入主题  
export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    return {
      polar: {
        title : {
            text: '会员数据统计',
            subtext: '动态数据',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            show: true,
            orient: 'vertical',
            left: 'left',
            data: ['微信访问','公众号访问','扫码进入','分享进入','搜索访问']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'微信访问'},
                    {value:310, name:'公众号访问'},
                    {value:234, name:'扫码进入'},
                    {value:135, name:'分享进入'},
                    {value:1548, name:'搜索访问'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
         ]
       }
    }
  }
}
</script>

根据需求修改后的代码：

<template>
  <div class="layout-no-cols right-list-panel-card right-list-toolbar">
    <div class="el-toolbar">
      <div class="el-toolbar-body" style="justify-content: flex-start;">
        <div class="el-col el-col-24" data-v-c2a23fca="">当前报表：综合报告</div>
      </div>
      <el-row>
        <el-col :span="24">当前报表：综合报告</el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="5">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
      <div style="margin-top: 15px;"></div>
      <el-row>
        <el-col :span="20">
          <v-chart :options="polar"/>
        </el-col>
      </el-row>
      <div style="margin-top: 15px;"></div>
      <el-table :data="tableData" border style=" 100%">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="name" label="商品ID" width="125" header-align="center"></el-table-column>
        <el-table-column prop="value" label="商品名称"  header-align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    return {
      value1: '',
      value2: '',
      polar: {
        title: {
          text: '会员数据统计',
          subtext: '动态数据',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: 'left',
          data: ['微信访问', '公众号访问', '扫码进入', '分享进入', '搜索访问']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      tableData: [
        { value: 335, name: '微信访问' },
        { value: 310, name: '公众号访问' },
        { value: 234, name: '扫码进入' },
        { value: 135, name: '分享进入' },
        { value: 1548, name: '搜索访问' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // console.log(this.polar.series[0].data)
      this.polar.series[0].data = this.tableData

      var arr = []
      for (var item in this.tableData) {
        arr.push(this.tableData[item].name)
      }
      // console.log(arr)
      this.polar.legend.data = arr
    }
  }
}
</script>

<style scoped>
.echarts{
  width:800px
}
</style>

效果图：

改变其中饼状图颜色：三种方式

1、给每一个数据单独设置颜色：

tableData: [
        { value: 335, name: '微信访问',  itemStyle: { color: '#005eff' } },
        { value: 310, name: '公众号访问' },
        { value: 234, name: '扫码进入' },
        { value: 135, name: '分享进入' },
        { value: 1548, name: '搜索访问' }
      ]

刷新可以看到微信的颜色变为了蓝色：

2、可以统一在 polar 中设置颜色：

polar: {
        title: {
          text: '会员数据统计',
          subtext: '动态数据',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: 'right',
          data: []
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#005eff', '#f00', '#f0f', 'green', '#f60']
      },

刷新后可以看到：

3、在 series 中自定义设置颜色：

series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                color: function(params) {
                  // 自定义颜色
                  var colorList = [
                    '#FE8463', 'red', 'green', '#005eff', '#f0f'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]

刷新后可以看到：

更多详细信息请参考 ECharts 的 API 文档。