使用echarts绘制图表
2017-08-13 本文已影响390人
Lusia_
随便聊聊～～
最近接了新的项目需求，是有关于周报的事情，所以涉及到了各种柱状图，饼图，散点图以及地图等等。即便之前也做过图表，但是好多的配置项总是算查文档才能搞明白，所以这次趁着有机会，就在这里小小的总结一下遇到的问题吧。
1、基本配置项
饼图：
var optionPhase = {
// 标题
title: {
text: '上周（' + _this.bannerData.startTimeMd + '-'+
_this.bannerData.endTimeMd + '）'+
_this.industyName + '领域获投轮次分布',
// 这里标题中加入了变量 展现形式： 上周（7.29-8.4）金融领域获投轮次分布
x:'center' // 标题居中显示
},
// 提示框
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" // 提示框内容
},
// 工具内容
toolbox: {
show: true,
feature: {
saveAsImage: {} // 保存图片
}
},
series : [
{
name: '轮次',
type: 'pie', // 饼状图
radius : '55%',
center: ['50%', '60%'],
data: dataNonull,
itemStyle: {
// 移入展示样式
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
// 正常展示样式
normal:{
label:{
show: true,
formatter: '{b} {d}%',
textStyle: {
color: '#000'
}
},
// 可以自定义展示颜色
color: function (params) {
var colorList = [
'#0076D0', '#43A8E0', '#22BA6F', '#41CC5D', '#FFA300',
'#F2CE00', '#FF6000', '#FF7020', '#A6A6A6', '#D9D9D9',
'#c1beff', '#c2e7ff', '#fabdff'
];
return colorList[params.dataIndex]
},
labelLine :{show:true}
}
}
]
};
柱状图
optionIndusty = {
title: {
text: '上周（7.1-7.7）国内各领域获投数量',
x:'center'
},
color: ['#0076D0'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis : [
{
type : 'category',
data : ['企业服务', '电商', '消费生活', '文娱传媒', '教育', '医疗健康', '非MT', '汽车金融', '无人机', '体育'],
axisTick: { //坐标轴刻度相关设置
alignWithLabel: true
},
axisLabel:{ //坐标轴刻度标签的相关设置
interval:0,
formatter:function(value)
{
return value.split("").join("\n");
},
// rotate:-90,//倾斜度 -90 至 90 默认为0
margin:10,
textStyle:{
color:"#000"
}
},
}
],
yAxis : [
{
type : 'value',
splitLine: { // y轴分割线
show: false
}
}
],
series : [
{
name:'融资数量',
type:'bar',
barWidth: 20,
data:[10, 33, 4, 8, 15, 25, 52, 39, 30, 20],
itemStyle: {
normal:{ // 柱状图上的数值显示
label:{
show: true,
position: 'top',
textStyle: {
color: '#000'
}
}
}
}
]
};
左右双向柱状图（大多其实都在处理数据。。。）
var nameArr = ['百万级', '千万级', '亿元级'];
var nameArrTemp = [];
var valueArrMTemp = [];
var valueArrRTemp = [];
var valueArrM = [];
var valueArrR = [];
var wplValue = '';
axios.get(接口地址, {params: sendData})
.then(function (response) {
var dataNonull = response.data.data;
for(var i = 0; i < dataNonull.length;i++) {
if (dataNonull[i].name.indexOf('美元') > -1) {
valueArrM.push(dataNonull[i].value);
} else if (dataNonull[i].name.indexOf('人民币') > -1) {
valueArrR.push(dataNonull[i].value);
} else if(dataNonull[i].name.indexOf('未披露') > -1) {
wplValue = dataNonull[i].value;
}
}
valueArrM.reverse();
valueArrR.reverse();
for(var j = 0; j < nameArr.length; j++) {
if(valueArrM[j] == 0 && valueArrR[j] == 0) {
} else {
nameArrTemp.push(nameArr[j]);
valueArrMTemp.push(-valueArrM[j]);
valueArrRTemp.push(valueArrR[j]);
}
}
var amountChart = echarts.init(document.getElementById('amountChart'));
var optionAmount = {
title: {
text: '上周（' + _this.bannerData.startTimeMd + '-'+ _this.bannerData.endTimeMd + '）' + _this.industyName + '领域获投金额分布',
x:'center',
subtext: '未披露的融资数量：' + wplValue,
subtextStyle: {
fontSize: '15',
color: '#555'
}
},
legend: {
data:[ '美元', '人民币'],
bottom: 0
},
toolbox: { // 工具内容
show: true,
feature: {
saveAsImage: {} // 保存图片
}
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params, ticket, callback) {
var res = '融资数量' ;
// var res = params[0].name ;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].name + params[i].seriesName + ' : ' + Math.abs(params[i].value) ;
}
setTimeout(function () {
// 仅为了模拟异步回调
callback(ticket, res);
}, 500)
return 'loading...';
}
},
grid: {
left: '3%',
right: '4%',
bottom: '10%', // 图表距离
containLabel: true
},
xAxis: {
show: true,
type: 'value',
axisTick: { //坐标轴刻度相关设置
show: false
},
axisLabel : {
formatter: function (value){return Math.abs(value);} //坐标轴显示的数值都取绝对值
}
},
yAxis: {
type: 'category',
axisTick: { //坐标轴刻度相关设置
show: false
},
data: nameArrTemp
},
series: [
{
name: '美元',
type: 'bar',
barWidth: 15,
stack: '总量',
itemStyle: {
normal:{
label:{
show: true,
position: 'left',
textStyle: {
color: '#000'
},
formatter:function(v){return Math.abs(v.data)}
}
}
},
data: valueArrMTemp
},
{
name: '人民币',
type: 'bar',
barWidth: 15,
stack: '总量', // 数据堆叠，同类目轴上系列配置相同的stack值可以堆叠放置
itemStyle: {
normal:{
label:{
show: true,
position: 'right',
textStyle: {
color: '#000'
}
},
}
},
data: valueArrRTemp
}
]
};
window.onresize = amountChart.resize;
amountChart.setOption(optionAmount);
})
图表如下：
image.png
2、常用/遇到过的问题
1、提示框组件
tooltip : {
trigger: 'axis', // 'item'数据项图形触发，散点图，饼图等无类目轴的图表中使用。'axis'坐标轴触发,柱状图，折线图等会使用类目轴的图表中使用。
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
2、图例组件
legend: {
data: ['上上周', '上周'],
orient: 'vertical', // 垂直显示 ，默认水平
bottom: 0 // 显示再底部 left:'left' 显示在左上部
}
3、工具
toolbox: { // 工具内容
show: true,
orient: 'vertical', // 垂直
left: 'right', // 右部
top: 'center' // 上下居中
feature: {
dataView: ｛ readOnly: false},
restore: {},
saveAsImage: {} // 保存图片
}
}
4、坐标轴横坐标标签垂直显示
xAxis : [
{
type : 'category',
data : nameArr,
axisTick: { //坐标轴刻度相关设置
show: false
},
axisLabel:{ //坐标轴刻度标签的相关设置
interval:0,
formatter:function(value)
{
return value.split("").join("\n");
},
// rotate:-90,//倾斜度 -90 至 90 默认为0
margin:10,
textStyle:{
color:"#000"
}
},
}
],
5、图表边距
grid: {
left: '3%',
right: '4%',
bottom: '10%', // 图表距离
containLabel: true
},
