ECharts(百度的一个开源可视化库)的配置项决定了图表的样式、数据、交互等行为。
- title:图表标题的配置项,可以设置标题的文本内容、字体样式、居中对齐等。
title: {
text: 'World Population'
},
- xAxis和yAxis:
yAxis: {
name: '℃',
show: true, // 是否显示Y轴
scale:true, //y轴根据数值实现自适应
type: 'value',
inside: false, // Y轴的标签是否朝内
interval: 50, // Y轴的刻度间隔
nameTextStyle: { //name的颜色
color: '#666'
},
splitLine: { //网格线
show: true,
lineStyle: {
color: 'rgb(34, 175, 198)',
type: 'solid'
}
},
axisLabel: {
show: true,
color: '#666',
interval: 3
},
axisLine: {
// show: false
lineStyle: {
color: 'rgb(34, 175, 198)',
type: 'solid'
}
},
axisTick: {
show: false
}
},
- legend:图例的配置项,可以设置图例的标题、布局、位置等。
legend: {
top:'5%',
right: '1%',
itemWidth: 10, // 图例图形宽度
itemHeight: 10, // 图例图形高度
textStyle: {
color: '#ccc',
fontSize:'10'
}
},
- tooltip:提示框的配置项,可以设置提示框的显示方式、样式、内容等。
tooltip:{
trigger: 'axis', // 触发类型,'axis' 表示坐标轴触发,适用于柱状图、折线图等
// trigger: 'item', // 触发类型,'item' 表示数据项触发,适用于饼图等
// trigger: 'none', // 关闭提示框
showDelay: 0, // 显示延迟,单位为 ms
hideDelay: 100, // 隐藏延迟,单位为 ms
enterable: false, // 提示框是否允许鼠标进入
// 提示框容器的 CSS 样式
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
// 提示框内容格式器
formatter: function(params) {
// params 是一个数组,数组中包含每个系列的数据信息
let result = params[0].name + '<br/>';
params.forEach(function (item) {
result += item.seriesName + ': ' + item.value + '<br/>';
});
return result;
}
}
- toolbox:工具箱的配置项,可以设置工具箱的布局、按钮样式等。
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
- grid:网格的配置项,可以设置网格的位置、大小、背景色等。
grid: {
left: "2%",
right: "2%",
bottom: "1%",
containLabel: true
},
- dataZoom:数据区域缩放的配置项,可以设置数据缩放的方式、范围等。
- visualMap:视觉映射的配置项,可以设置映射的方式、颜色、范围等。
- series:数据系列的配置项,可以设置系列的类型、数据、样式等。不同类型的系列有各自的特定配置项,如line系列的smooth属性、bar系列的stack属性等。
series:[
{
name:'温度',
data:[0.3,0.47,0,0],yAxisIndex: 1, //对应第几条y轴
type:'line', //line折线图 bar柱状图
smooth:true, //圆滑曲线symbol:'none', //折线隐藏小圆点
barWidth: '30%', //柱状图宽度
markPoint:{ //最大值最小值
data:[
{type:'max',name:'Max'},
{type:'min',name:'Min'}
]
},markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
lineStyle:{
width:4, //设置折线宽度type: 'dashed' // 设置为虚线
},tooltip: {
valueFormatter: function (value) {
return value + ' t'; //鼠标移到上面显示的文字
}
},
//在series的itemStyle中设置渐变色
itemStyle:{
normal:{
color:newecharts.graphic.LinearGradient(
0,0,0,1,//这四个参数分别表示渐变的起点(x1,y1)与终点(x2,y2)
[
{offset:0,color:'rgb(58,232,156)'}, //0%处的颜色
{offset:1,color:'rgb(34,175,198)'} //100%处的颜色
]
)}
},//横向条形图设置每条数据的颜色
itemStyle: {
barBorderRadius: [50, 0, 0, 50], // 统一设置四个角的圆角大小
normal: {
//这里是重点
color: function (params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = [
'rgb(0, 173, 169)',
'rgb(0, 173, 169)',
'rgb(28, 197, 80)',
'rgb(0, 140, 217)',
'rgb(163, 143, 253)',
'rgb(255, 166, 82)',
'rgb(249, 84, 84)'
];
return colorList[params.dataIndex];
}
}
},
//顶部展现数字
label: {
show: true, // 显示数据
color:'#666',
position: 'right', // 数据显示的位置
// 格式化数据显示
formatter: '{c}' // {c} 代表数据值
},
}
]
- 其他配置
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {……}
option && myChart.setOption(option,true);
window.onresize = function () {
myChart.resize();
};