以前都用的是 echarts 插件，这次的项目要用 vue-echarts 插件。
vue-echarts 和 echarts 的区别：
v4.0.1+ 开发，依赖 Vue.js v2.2.6+，功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它。vue-echarts特征：
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="width: 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 } } } </script> <style scoped> .echarts{
width:800px
} </style>
效果图：
更多详细信息请参考 ECharts 的 API 文档。
原文：https://www.cnblogs.com/joe235/p/13625652.html