Vue使用vue-echarts圖表
阿新 • • 發佈:2018-10-17
api ade git rom doc 來源 ast 調整 rgb
vue-echarts和echarts的區別:
- vue-echarts是封裝後的vue插件, 基於 ECharts
v4.0.1
+ 開發,依賴 Vue.jsv2.2.6
+,功能一樣的只是把它封裝成vue插件 這樣更方便以vue的方式去使用它。 - echarts就是普通的js庫,
vue-echarts特征:
- 輕量,高效,按需綁定事件
- 支持按需導入ECharts.js圖表??和組件
- 支持組件調整大小事件自動更新視圖
git地址:https://github.com/ecomfe/vue-echarts
安裝
npm(推薦方式)
$ npm install vue-echarts
bower
$ bower install vue-echarts
手動安裝
直接下載 dist/vue-echarts.js
並在 HTML 文件中引入:
<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>
使用方法
用 npm 與 vue-loader 基於 ES Module 引入(推薦用法)
import Vue from ‘vue‘ import ECharts from ‘vue-echarts/components/ECharts.vue‘
// 手動引入 ECharts 各模塊來減小打包體積 import ‘echarts/lib/chart/bar‘ import ‘echarts/lib/component/tooltip‘ import ‘echarts/lib/component/polar‘ import ‘echarts/lib/component/legend‘ import ‘echarts/lib/component/title.js‘
// 註冊組件後即可使用 Vue.component(‘v-chart‘, ECharts)
用 vue-cli 搭建的項目,打開 build 文件夾中的 webpack.base.conf.js 文件
1、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[\\/])/ },
2、webpack 2.x 修改成如下
{ test: /\.js$/, loader: ‘babel-loader‘, include: [resolve(‘src‘), resolve(‘test‘), resolve(‘node_modules/vue-echarts-v3/src‘)] }
調用組件
<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>
自定義主題
只要把定義主題樣式theme.json文件通過下面方法引入即可
import theme from ‘../theme.json‘ ECharts.registerTheme(‘ovilia-green‘, theme);
圖示:
更多詳細信息請參考 ECharts 的 API 文檔。
Vue使用vue-echarts圖表