02-echarts组件
目录
1. grid网格组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>3-1-grid网格组件</title>
</head>
<body>
<!-- Echarts中的网格是直角坐标系下定义网格布局和大小及颜色的组件，用于定义直角坐标系整体布局。 -->
<script src="js/echarts.min.js"></script>
<div id="box" style="width: 1200px;height: 600px"></div>
<script>
// 用ID的是直接box，不是.box !!!
var myChart = echarts.init(document.getElementById("box"));
var option = {
grid: { //配置网格组件
show: true, //设置网格组件是否显示
x: 55, y: 66, //设置网格左上角的位置
width: '93%', //显示区域93%的宽度 注意要带引号！！！
height: '80%', //显示区域80%的宽度
x2: 100, y2: 100, //设置网格右下角的位置
borderWidth: 5, //设置网格边界线的宽度
borderColor: 'red', //设置网格边界线的颜色为红色
backgroundColor: '#f7f7f7' //设置背景——整个网格的颜色
},
title: {
text: '3-1-grid网格组件',
subtext: '某某'
},
tooltip: {
trigger: 'axis'
},
legend: {},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '最高气温',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
2. Axis坐标轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>3-2-Axis坐标轴</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="width: 1200px;height: 600px"></div>
<script>
// 用ID的是直接box，不是.box !!!
var myChart = echarts.init(document.getElementById("box"));
var option = {
// 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
color: ['red', 'green', 'blue', 'yellow', 'grey', '#FA8072'],//使用自己预定义的颜色
title: {
text: '3-2-Axis坐标轴组件',
subtext: '某某'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['降水量', '蒸发量', '最高气温', '最低气温']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [ //配置x轴坐标系
{ //指定第一条x轴上的类目数据及格式
type: 'category', //坐标轴类型：1.类目型（category）2.数值型（value）3.时间型（time）
position: 'bottom',
boundaryGap: true, //类目起始和结束两端的空白策略，默认为true（留空），false则为顶头
show: true,
axisLine: { //第一条x坐标轴轴线相关设置
lineStyle: {
color: 'green', //坐标轴轴线的颜色
type: 'solid', //线的类型。可选：1.'solid'(实线边框)2.'dashed'(短竖线组成的虚线边框)3.'dotted'（小圆点组成的虚线边框）
width: 2 //坐标轴线线宽
}
},
axisTick: { //第一条x坐标轴刻度标记相关设置
show: true,
length: 10, //坐标轴刻度线的长度
lineStyle: {
color: 'red', //刻度线的颜色
type: 'solid', //刻度线的类型
width: 2 //刻度线线宽
}
},
axisLabel: { //第一条x坐标轴刻度文本标签的相关设置
show: true,
interval: 'auto', //坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。
rotate: 45, //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
margin: 8, //刻度标签与轴线之间的距离。
formatter: '{value}月', //刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
textStyle: {
color: 'blue',
fontFamily: 'sans-serif',
fontSize: 15,
fontStyle: 'italic',
fontWeight: 'bold'
}
},
// splitLine grid 区域中的分隔线。
splitLine: { //设置第一条x轴上的轴分割线
show: true,
lineStyle: {
color: '#483d8b',
type: 'dashed',
width: 1
}
},
// splitArea:坐标轴在 grid 区域中的分隔区域，默认不显示。
splitArea: { //设置第一条x轴上的轴分隔区域
show: true,
areaStyle: {
//rgba打成了rbda！！！
color: ['rgba(144,238,144,0.3)', 'rgba(135,200,250,0.3)']
}
},
data: [
'1','2','3','4','5',
{ //对第一条x轴进行轴标签个性化
value: '6',
textStyle: {
color: 'red',
fontSize: 30,
fontStyle: 'normal',
fontWeight: 'bold'
}
},
'7','8','9','10','11','12'
]
},
{
type: 'category',
data: ['一月','二月','三月' ,'四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
}
],
yAxis: [
{
type: 'value',
position: 'left',
boundaryGap: [0,0.1],
axisLine: {
lineStyle: {
color: 'red',
type: 'solid',
width: 2
}
},
axisTick: {
show: true,
length: 10,
lineStyle: {
color: 'green',
type: 'solid',
width: 2
}
},
axisLabel: {
show: true,
interval: 'auto',
rotate: -45,
margin: 18,
formatter: '{value}ml',
textStyle: {
color: '#1e90ff',
fontFamily: 'verdana',
fontSize: 10,
fontStyle: 'normal',
fontWeight: 'bold'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#483d8b',
type: 'dotted',
width: 2
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(205,92,92,0.3)', 'rgba(255,215,0,0.3)']
}
},
},
{
type: 'value',
splitNumber: 10, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
axisLabel: {
formatter: function(value){
return value + '℃'
}
},
splitLine: {
show: false
}
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '降水量',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: '最低气温',
type: 'line',
smooth: true,
yAxisIndex: 1,
data: [
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,6.2
],
},
{
name: '最高气温',
type: 'line',
smooth: true,
yAxisIndex: 1,
data: [
12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0,24.5, 18.0, 16.2
]
},
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
3. title标题组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>3-3-title标题组件</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="width: 1200px;height: 600px"></div>
<script>
// 用ID的是直接box，不是.box !!!
var myChart = echarts.init(document.getElementById("box"));
var mytextStyle = {
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '黑体'
};
var option = {
grid: { //配置网格组件
show: true, //设置网格组件是否显示
x: 55, y: 66, //设置网格左上角的位置
borderColor: '#FA8072', //设置网格边界线的颜色为红色
},
title: {
show: true,
text: '3-3-title标题组件', //设置主标题
subtext: '某某', //设置副标题
target: 'blank', //'self'表示为当前窗口打开,'blank'表示为新窗口打开
subtarget: 'blank',
textAlign: 'center',
textBaseline: 'top',
textStyle: mytextStyle,
padding: 5,
itemGap: 10,
zlevel: 0,
z: 2,
left: '10%',
top: '10',
right: 'auto',
bottom: 'auto',
backgroundColor: 'yellow',
boderColor: '#ccc',
borderWidth: 2,
shadowColor: 'red',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 10
},
tooltip: {
trigger: 'axis'
},
legend: {},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
4. 多个标题组件实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>3-4-多个标题组件实例</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="width: 1200px;height: 600px"></div>
<script>
// 用ID的是直接box，不是.box !!!
var myChart = echarts.init(document.getElementById("box"));
var titles = ['气温变化', '空气质量指数', '金价走势', '股票A走势'];
var dataAll = [
[
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
[
[10.0, 9.14],
[8.0, 8.14],
[13.0, 8.74],
[9.0, 8.77],
[11.0, 9.26],
[14.0, 8.1],
[6.0, 6.13],
[4.0, 3.1],
[12.0, 9.13],
[7.0, 7.26],
[5.0, 4.74]
],
[
[4.0, 4.6],
[5.0, 5.7],
[6.0, 6.4],
[7.0, 8.1],
[8.0, 7.1],
[9.0, 8.4],
[10.0, 9.8],
[11.0, 9.9],
[12.0, 8.5],
[13.0, 9.2],
[15.0, 11.0]
],
[
[2.0, 2.8],
[3.0, 3.6],
[4.0, 4.1],
[5.0, 5.4],
[6.0, 6.7],
[7.0, 7.4],
[8.0, 7.5],
[9.0, 7.5],
[12.0, 9.6],
[15.0, 10.1],
[18.0, 11.9]
]
];
var markLineOpt = {
animation: false,
lineStyle: {
normal: { type: 'solid' }
},
data: [
[
{ coord: [0, 3], symbol: 'none' },
{ coord: [20, 13], symbol: 'none' }
]
]
};
var option = {
title: [
{
show: true,
text: '3-4-多个标题组件实例', //设置主标题
subtext: '某某', //设置副标题
},
{ text: titles[0], textAlign: 'center', left: '25%', top: '1%' },
{ text: titles[1], textAlign: 'center', left: '73%', top: '1%' },
{ text: titles[2], textAlign: 'center', left: '25%', top: '50%' },
{ text: titles[3], textAlign: 'center', left: '73%', top: '50%' },
],
grid: [
{ x: '7%', y: '7%', width: '38%', height: '38%' },
{ x2: '7%', y: '7%', width: '38%', height: '38%' },
{ x: '7%', y2: '7%', width: '38%', height: '38%' },
{ x2: '7%', y2: '7%', width: '38%', height: '38%' }
],
tooltip: {
formatter: 'Group(a):({c})'
},
xAxis: [
{ gridIndex: 0, min: 0, max: 20 },
{ gridIndex: 1, min: 0, max: 20 },
{ gridIndex: 2, min: 0, max: 20 },
{ gridIndex: 3, min: 0, max: 20 }
],
yAxis: [
{ gridIndex: 0, min: 0, max: 15 },
{ gridIndex: 1, min: 0, max: 15 },
{ gridIndex: 2, min: 0, max: 15 },
{ gridIndex: 3, min: 0, max: 15 }
],
series: [
{
name: 'I',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
data: dataAll[0],
},
{
name: 'II',
type: 'scatter',
xAxisIndex: 1,
yAxisIndex: 1,
data: dataAll[1],
},
{
name: 'III',
type: 'scatter',
xAxisIndex: 2,
yAxisIndex: 2,
data: dataAll[2],
},
{
name: 'IV',
type: 'scatter',
xAxisIndex: 3,
yAxisIndex: 3,
data: dataAll[3],
},
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
5. legend图例组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>3-5-legend图例组件</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="width: 1000px;height: 600px"></div>
<script>
// 用ID的是直接box，不是.box !!!
var myChart = echarts.init(document.getElementById("box"));
var option = {
color: ['red', 'green', 'blue', 'grey'],
title: {
text: '3-5-legend图例组件',
subtext: '某某'
},
legend: {
orient: 'horizontal',
x: 'right',
y: 'top',
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
padding: 10,
itemGap: 20,
textStyle: { color: 'red' },
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
axisLabel: {
formatter: '{value} °C'
},
splitLine: { show: false }
},
],
series: [
{
name: '某一年的蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.6, 135.6],
},
{
name: '某一年的降水量',
type: 'line',
smooth: true,
//这行忘记打了！！！
yAxisIndex: 1,
data: [11, 11, 15, 13, 12, 13, 10],
},
{
name: '某一年的最高气温',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
},
{
name: '某一年的最低气温',
type: 'line',
smooth: true,
//这行忘记打了！！！
yAxisIndex: 1,
data: [-2, 1, 2, 5, 3, 2, 0],
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
6. 滚动效果图例组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>3-6-滚动效果图例组件</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="width: 800px;height: 600px"></div>
<script>
// 用ID的是直接box，不是.box !!!
var myChart = echarts.init(document.getElementById("box"));
var option = {
color: ['red', 'green', 'blue', 'grey'],
// title: {
// text: '3-6-滚动效果图例组件',
// subtext: '某某'
// },
legend: {
type: 'scroll',
orient: 'horizontal',
x: 'right',
y: 'top',
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
padding: 10,
itemGap: 20,
textStyle: { color: 'red' },
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
axisLabel: {
formatter: '{value} °C'
},
splitLine: { show: false }
},
],
series: [
{
name: '某一年的蒸发量 ',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.6, 135.6],
},
{
name: '某一年的降水量 ',
type: 'line',
smooth: true,
//这行忘记打了！！！
yAxisIndex: 1,
data: [11, 11, 15, 13, 12, 13, 10],
},
{
name: '某一年的最高气温 ',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
},
{
name: '某一年的最低气温 ',
type: 'line',
smooth: true,
//这行忘记打了！！！
yAxisIndex: 1,
data: [-2, 1, 2, 5, 3, 2, 0],
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
7. toolbox工具箱组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>3-7-toolbox工具箱组件</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="box" style="width: 800px;height: 600px"></div>
<script>
// 用ID的是直接box，不是.box !!!
var myChart = echarts.init(document.getElementById("box"));
var option = {
color: ['red', 'green', 'blue', 'yellow', 'grey', '#FA8072'],
title: {
text: '3-7-toolbox工具箱组件',
subtext: '某某'
},
tooltip: {
trigger: 'axis'
},
legend: {
x: 300,
data: ['最高', '最低']
},
toolbox: {
show: true,
orient: 'horizontal',
x: 'right',
y: 'top',
color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc',
borderWidth: 0,
padding: 5,
showTitle: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true },
dataZoom: {
show: true,
},
// mytool: {
// show: true,
// icon: "image://images/girl3.gif",
// icon: 'image://http://echarts.baidu.com/images/favicon.png',
// }
}
},
xAxis: [{
type: 'category',
boundary: false,
data: function () {
var list = [];
for (var i = 1; i <= 30; i++) {
list.push('2022-03-' + i);
}
return list;
}()
}
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: '某一年的降水量 ',
type: 'line',
smooth: true,
data: function () {
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random() * 30) + 10);
}
return list;
}()
},
{
name: '某一年的最低气温 ',
type: 'line',
smooth: true,
data: function () {
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random() * 10));
}
return list;
}()
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
8. tooltip提示框组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: [
{
text: '3-8-提示框组件实例图',
top:0,
left:0,
textStyle: {
fontSize: 18,
},
},
{
text:'某某',
left:100,
top:'5%',
textStyle: {
fontSize: 13,
},
},
],
tooltip: {
trigger: 'axis',
axisPointer:
{
type:'shadow',
lineStyle:{
color:'#48b',width:2,type:'solid'
},
crossStyle:{
color:'#le90ff',width:1,type:'dashed'
},
shadowStyle:{
color:'rgba(150,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){
return [p[0]+10,p[1]-10];
},
textStyle:{
color:'blue',decoration:'none',FontFamily:'sans-serif',
fontSize:15,fontStyle:'normal',fontWeight:'bolid'
},
formatter:function(params,tricket,callback){
console.log(params)
var res='详情提示框：<br/>'+params[0].name;
for (var i=0,l=params.length; i<1;i++){
res +='<br/>'+params[i].seriesNames+ ':'+params[i].value;
}
setTimeout(function (){
//模拟异步回调
callback(tricket,res)
},500)
return 'loading';
}
},
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}
}
}
},
calculabel:true,
xAxis: {
// show:false,smooth:true,
// type: 'category',
// boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
},
series: [
{
//数据1
name: '坐标轴触发1',
type: 'bar',
data: [
{ value:320,extra:'Hello~'},
332,301,334,390,330,320
],
},
{
//数据2
name: '坐标轴触发2',
type: 'bar',
data: [ 862,1018,964,1026,1679,1600,157],
},
{
//数据3
name: '坐标轴触发3',
type: 'bar',
tooltips:{
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'}},
tooltips:{
backgroundColor:'blue',
formatter:"Data formatter:<br/>{a}<br/>{b}:{c}"
}
},
134,90,
{
value:230,tooltip:{show:false}
},
210
],
},
{
//数据4
name: '数据项触发2',
type: 'bar',
tooltips:{
show:false,trigger:'item'
},
stack:'数据项',
data: [ 150,232,201,154,190,330,410],
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
9. markPoint标记点、markLine标记线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: [
{
text: '标记点、标记线实例图',
top:0,
left:0,
textStyle: {
fontSize: 18,
},
},
{
text:'某某',
left:100,
top:'5%',
textStyle: {
fontSize: 13,
},
},
],
toolbox:{
x:520,
show:true,
feature:{
dataview:{
show:true,
},
restore:{
show:true,
},
dataZoom:{
show:true,
},
magicType:{
show:true,
title:{
line:'动态类型切换-折线图',
bar:'动态类型切换-柱状图',
},
type:[]
},
saveAsImage:{
show:true,
},
}
},
tooltip: {
trigger:'axis'
},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [15, 30, 56, 40, 100, 80],
markPoint:{
data:[
{
type:'max',name:'最大值',symbol:'diamond',
symbolSize:25,
itemStyle:{
normal:{color:'red'}
},
},
{
type:'min',name:'最小值',symbol:'arrow',
symbolSize:20,
itemStyle:{
normal:{color:'blue'}
},
},
]
},
markLine:{
data:[
{
type:'average',name:'平均值',
itemStyle:{
normal:{borderType:'dotted',color:'darked'}
},
}
]
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
浙公网安备 33010602011771号