ArcherWong博客
首页
博客
vue笔记13-vue中使用echarts
作者:ArcherWong
分类:vue
时间:2019-01-04 10:38:16
阅读:1169
# 1.安装 ``` npm install echarts -S ``` # 2.引入 1. 全局引入 main.js中 ``` // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts ``` 2. 按需引入 全局引入会将所有的echarts图表打包,导致体积过大,最好还是按需引入 ``` let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/pie'); require('echarts/lib/component/grid'); require('echarts/lib/component/legend'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/geo'); require('echarts/lib/component/axisPointer'); require('echarts/lib/component/dataZoom'); require('echarts/lib/component/timeline'); require('echarts/lib/component/toolbox'); require('echarts/lib/component/title'); ``` # 3. 使用 1. 画一个饼图 html ``` <div id="os_chart" style="margin:0 auto;width:750px; height:500px"></div> ``` js ``` data() { return { os_option: { title : { show:false, x:'center' }, legend: { orient: 'vertical', left: 'left', data: [], }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series : [ { name: '操作系统', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }, } }, methods: { initChart(){ this.os_chart = echarts.init(document.getElementById('os_chart')) }, initData(){ this.$http.get('/api/statistics/index').then((res) => { if(res.data.success){ this.os_option.legend.data = res.data.data.os.x; this.os_option.series[0].data = res.data.data.os.y; this.os_chart.setOption(this.os_option); } }); }, }, mounted() { this.initChart(); this.initData(); }, ``` 2. 画一个中国地图数据 html ``` <div id="china_map_chart" style="margin:0 auto;width:750px; height:500px"></div> ``` js ``` let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/map'); require('echarts/lib/component/grid'); require('echarts/lib/component/legend'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/geo'); require('echarts/lib/component/axisPointer'); require('echarts/lib/component/dataZoom'); require('echarts/lib/component/timeline'); require('echarts/lib/component/toolbox'); require('echarts/lib/component/title'); //地图数据是自己下载的,按照存放数据的路径引入 import {china} from '../plugins/chart/data/map/china'; import {world} from '../plugins/chart/data/map/world'; export default { data() { return { china_map_option: { title: { show:false, left: 'center', }, tooltip: { trigger: 'item', formatter: function (params) { var value = (params.value + '').split('.'); value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,'); return params.seriesName + '<br/>' + params.name + ' : ' + value; } }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { restore: {}, } }, visualMap: { min: 0, max: 38000000, text:['高','低'], range: [0, 38000000], realtime: false, calculable: true, inRange: { color: ['lightskyblue','yellow', 'orangered'] } }, series: [ { name: '国内访问来源统计', type: 'map', mapType: 'china', roam: true, itemStyle:{ emphasis:{label:{show:true}} }, data: [], } ] }, } }, methods: { initChart(){ this.china_map_chart = echarts.init(document.getElementById('china_map_chart')) echarts.registerMap('china', china); }, initData(){ this.$http.get('/api/statistics/index').then((res) => { if(res.data.success){ this.china_map_option.series[0].data = res.data.data.china; this.china_map_chart.setOption(this.china_map_option); } }); }, }, mounted() { this.initChart(); this.initData(); }, } ``` 这里地图数据原始数据是自己引入的,官方文档提示,ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。 JavaScript 引入示例 ``` <script src="echarts.js"></script> <script src="map/js/china.js"></script> <script> var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); </script> ``` JSON 引入示例 ``` $.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); }); ``` 我这里使用的是json数据,实际上我们不一定要使用ajax,只要获得数据即可,我利用下面的方式。 ``` export const china = {}; ``` 提供数据下载 : [中国地图](http://note.youdao.com/) , [世界地图](http://note.youdao.com/)
标签:
上一篇:
vue笔记12-状态管理vuex
下一篇:
vue笔记1-模板语法
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
centos7.3配置guacamole
golang笔记---关联数组(map)
letsencrypt证书-管理工具certbot
golang笔记---template模板语法
详解网络连接
友情链接
node文件
laravel-vue
ArcherWong的博客园