本文展示了如何配置ECharts中的提示框、工具箱、坐标轴以及数据系列，包括提示框的触发方式、样式，工具箱的功能设置，坐标轴的轴线、轴刻度、轴标签等细节，以及数据系列的标记线、标记点和数据项触发的自定义格式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.min.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
tooltip: { //配置提示框组件
trigger: 'axis',
axisPointer:
{
type: 'shadow',
lineStyle: {
color: '#48b', width: 2, type: 'solid'
},
crossStyle: {
color: '#0000ff', width: 1, type: 'dashed'
},
shadowStyle: {
color: 'rgba(999,150,150,0.2)', width: 'auto', type: 'default'
}
},
showDelay: 0, hideDelay: 0, transitionDuration: 0,
backgroundColor: 'rgba(0,222,0,0.5)',
borderColor: '#f50', borderRadius: 8, borderWidth: 2,
padding: 10,
position: function (p) {
//位置回调
//console.log && console.log(p);
return [p[0] + 10, p[1] - 10];
},
textStyle: {
color: 'blue', decoration: 'none', fontFamily: 'sans-serif',
fontSize: 15, fontStyle: 'normal', fontWeight: 'bold'
},
formatter: function (params, ticket, callback) {
console.log(params)
var res = '详情提示框 : <br/>' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}
setTimeout(function () {
//仅为了模拟异步回调
callback(ticket, res);
}, 500)
return 'loading';
}
//formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
},
toolbox: { //配置工具箱组件
show: true,
feature: {
mark: { show: true }, dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true }, saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [ //配置x轴坐标系
{ //指定第一条x轴上的类目数据及格式
type: 'category', position: 'bottom',
boundaryGap: true, show: true,
axisLine: { //设置第一条x轴上的轴线
lineStyle: {
color: 'pink', type: 'solid', width: 2
}
},
axisTick: { //设置第一条x轴上的轴刻度标记
show: true, length: 10,
lineStyle: {
color: 'blue', type: 'solid', width: 2
}
},
axisLabel: { //设置第一条x轴上的轴文本标记
show: true, interval: 'auto',
rotate: 45, margin: 8,
formatter: '{value}',
textStyle: {
color: '#000', //fontFamily: 'sans-serif',
fontSize: 15, fontStyle: 'italic', fontWeight: 'bold'
}
},
splitLine: { //设置第一条x轴上的轴分隔线
show: true,
lineStyle: {
color: 'black', type: 'dashed', width: 2
}
},
splitArea: { //设置第一条x轴上的轴分隔区域
show: true,
areaStyle: {
color: ['rgba(255,0,255,0.3)', 'rgba(238,130,238,0.3)','rgba(240,248,255,0.3)']
}
},
data: [
'周一', '周二','周三',
{ //设置第一条x轴上的轴标签个性化
value: '周四',
textStyle: {
color: 'red', fontSize: 30, fontStyle: 'normal',
fontWeight: 'bold'
}
},
'周五','周六','周日',
]
},
{ //设置指定第二条x轴上的类目数据
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'The', 'Frl', 'Sat','Sun']
}
],
yAxis: [ //配置y轴组件
{ //指定第一条y轴上的数值型数据及格式
type: 'value', position: 'left',
boundaryGap: [0, 0.1],
axisLine: { //设置第一条y轴上的轴线
show: true,
lineStyle: {
color: 'pink', type: 'dashed', width: 2
}
},
axisTick: { //设置第一条y轴上的轴标记
show: true,
length: 10,
lineStyle: {
color: 'blue', type: 'solid', width: 2
}
},
axisLabel: { //设置第一条y轴上的标签
show: true, interval: 'auto', margin: 18,
formatter: '{value}',
},
// splitLine: { //设置第一条y轴上的分隔线
// show: true,
// lineStyle: {
// color: '#483d8b', type: 'dotted', width: 2
// }
// },
splitArea: { //设置第一条y轴上的分隔区域
show: true,
areaStyle: {
color: ['rgba(652,511,92,0.3)', 'rgba(221,550,0,0.3)']
}
}
},
{ //指定第二条y轴上的数值型数据及格式
type: 'value',
splitNumber: 10,
axisLabel: { //设置第二条y轴上的数轴标签
formatter: function (value) {
return value + ' °C'
}
},
splitLine: { //设置第二条y轴上的分隔线
show: false
}
}
],
series: [ //配置数据系列
{ //设置数据系列1
name: '坐标轴触发1', type: 'bar',
data: [
{ value: 320, extra: 'Hello~' },
332, 300, 334, 390, 330, 320
],
markLine: { //设置标记线
data: [
{
type: 'average', name: '平均值',
itemStyle: //设置标记点的样式
{
normal: { borderType: 'dotted', color: 'darkred' }
},
}],
}
},
{ //设置数据系列2
name: '坐标轴触发2', type: 'bar',
data: [862, 1018, 964, 1026, 1679, 1600, 157],
markPoint: { //设置标记点
data: [
{
type: 'max', name: '最大值', symbol: 'diamond', symbolSize: 25,
itemStyle: { //设置标记点的样式
normal: { color: 'red' }
},
},
{
type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
itemStyle: { //设置标记点的样式
normal: { color: 'blue' }
},
},
]
},
},
{ //设置数据系列3
name: '数据项触发1', type: 'bar',
tooltip: {
trigger: 'item', backgroundColor: 'black', position: [0, 0],
formatter: "Series formatter: <br/>{a}<br/>{b}:{c}"
},
stack: '数据项',
data: [
120, 132,
{
value: 301, itemStyle: { normal: { color: 'red' } },
tooltip: {
backgroundColor: 'blue',
formatter: "Data formatter: <br/>{a}<br/>{b}:{c}"
}
},
134, 90,
{ value: 230, tooltip: { show: false } },
210
]
},
{ //设置数据系列4
name: '数据项触发2', type: 'bar',
tooltip: {
show: false, trigger: 'item'
},
stack: '数据项', data: [150, 232, 201, 154, 190, 330, 410]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
