大数据图表展示爬坑之路
#Echarts大数据图表展示爬坑之路
话不多说，先上一个小白示例:
ECharts&Bootstrap
Echarts折线图tooltip里数据添加单位：
tooltip: {
trigger: 'axis',
//在这里设置
formatter: '{a0}:{c0}万'
},Echartd为每个柱状图的柱子设置不同的颜色：
itemStyle: {
normal: {
color: function(params) {
//首先定义一个数组
let colorList = [ '#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589' ];
return colorList[params.dataIndex]
},
//以下为是否显示
label: {show: false}
}
}Echarts整体改变柱状图柱子颜色：<在series中添加如下代码>
itemStyle:{
normal:{color:'#4ad2ff'}
},添加下载和还原按钮：
toolbox: {
show: true,
feature: {
restore: {show: true},
saveAsImage: {show: true}
}
},***Echart饼图设置难点汇总：
设置饼图指示线不显示：<在series中添加如下代码>
itemStyle:{
normal:{
label:{
show:true //*显示/隐藏标示文字
},
labelLine:{
show:true //*显示/隐藏标示线
},
},
},修改饼图指示线样式<在series中添加如下代码>
label: {
normal: {
formatter: '{c|{c}} \n {b|{b}:}{d|{d}%}',
backgroundColor: '#f3f3f3',
borderColor: '#000000',
fontSize: 18,
borderWidth: 1,
rich: {
c: {
fontSize: 20,
align:'center',
},
b: {
padding: [5,5,5,0],
},
d:{
color: '#0083ff',
padding: [5,5,5,0],
}
}
}
},饼图添加悬浮提示框<在tooltip中添加如下代码>
trigger: 'item', //提示框触发方式,可选 item、axis
formatter:function(params){
return params.name+'
总票数 : '+params.data.value+'票
占比：'+ (params.percent - 0).toFixed(2)+'%';
},饼图 title 设置：
title:{
text:'货量:',
x:10, // title中text的偏移设置
textStyle:{
fontSize:'16',
fontWeight:'normal', //可选类型为normal、bold...
color:'#1fc7bd',
}
},饼图 legend 设置：
legend:{
x:'center',
y:'bottom',
padding:[5,25,30,25],
itemGap: 5, //每个小标签之间的间隙
itemHeight: 15, //每个小标签的宽度
itemWidth: 30, //每个小标签的高度
textStyle: { //每个小标签的文字颜色
color: '#990188'
}
},饼图设置每个区域颜色:
color: ['#1fc7bd','#f6bb42','#f476af','#76aff4','#0083ff'], //*用来设置每个区域颜色设置饼图的大小和位置：<在series中添加如下代码>
radius:'50%', //设置饼图大小
center:['50%','50%'], //设置饼图X、Y的位置*设置饼图可以单击：<在series中添加如下代码>
selectedMode: 'single',然后在setOption外面添加如下代码：
ChartName.on('click', function (param) {
const selected = param.selected;
});为目标图表添加 Loading 状态：
TargetChart.showLoading('default',{text:'页面正在拼命加载中...',maskColor:'#a9f0ff',textColor: '#000',});
.showLoading('default',{text:'页面正在拼命加载中...',maskColor:'#a9f0ff',textColor: '#000',});去掉目标图表的 Loading 状态：
TargetChart.hideLoading();
.hideLoading();目标图表的点击事件：<如柱状图>
TargetChart.on('click', function (recod) {}
.on('click', function (recod) {}*关闭目标图表的点击事件：<一般定义在目标图表点击事件之前！>
TargetChart.off('click');
.off('click');强制显示所有X轴的标签：
xAxis: {
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec","In-transit"],
axisLabel: {
interval:0,
},
name:'月份',
},
axisLabel: {
interval:0,
},
name:'月份',
},柱状图提示悬浮框设置：
tooltip: {
trigger: 'axis',
axisPointer : {
type : 'cross' // 默认为直线,可选为:'line' | 'shadow' | 'cross'
},
},柱状图倒置：
xAxis: {
axisLabel: {
interval:0,
},
position:'top',
},
yAxis: {
type:'value',
inverse:true,
},为图表添加下载/切换图表类型/还原等按钮：
toolbox:{
show: true,
feature: {
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
saveAsImage: {title:'保存'}
}
},Canvas中图表位置的的定位：
grid:{
y2:5, //距离底部5px
},
grid:{
y:5, //距离顶部5px
},设置当饼图数据为0时,不显示其指示线：
//当饼图的某条数据为零时删除<隐藏线段>
this.state.ChartVirtualData.map(X=>{
if (X.value == 0) {
console.log(X);
X.value = "" //如果数据为0则将其设置为空字符串<数据为空字符串不会显示！>
}
})
this.state.ChartVirtualData.map(X=>{
if (X.value == 0) {
console.log(X);
X.value = "" //如果数据为0则将其设置为空字符串<数据为空字符串不会显示！>
}
})让状图正上方始终有提示
series: [{
name: 'TEU',
color: '#990614',
type: 'bar',
barWidth: 20,
data:this.state.ShippingBoxChartValue,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
},
animationDelay: function (idx) {
return idx * 10 + 100;
}
}],
#Highcharts大数据图表展示爬坑之路
Highcharts JS去除Highcharts.com链接的方法
在js文件中找到Credits，然后把enable的属性从!0改为0。也可以更改为自己需要的：
enabled:设置是否显示链接；
text：设置链接显示的名称；
href：设置链接的url地址；
去掉图片右上角的打印及导出按钮，在js中设置以下代码：
exporting:{
enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},Highcharts JS如何去除打印功能？
printButton : {
symbol :"printIcon",
x :-36,
symbolFill :"#B5C9DF",
hoverSymbolFill :"#779ABF",
_titleKey :"printButtonTitle",
onclick : function() {
this.print()
}
}使用户可以下载生成的图表<引入如下js>;
为data后的数据添加符号：
tooltip:{
valueSuffix: '%'
},改变默认主题样式<例如黑色主题>：