1.安装
npm install echarts -S
2.引入
- 全局引入
main.js中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
- 按需引入
全局引入会将所有的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. 使用
- 画一个饼图
html
<div id="os_chart" style="margin:0 auto;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();
},
- 画一个中国地图数据
html
<div id="china_map_chart" style="margin:0 auto;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 = {};