第一章
下载echarts
1.源文件代码：https://www.jsdelivr.com/package/npm/echarts
里面4.8版本的dist文件夹下面的文件
2.地图数据网站：http://datav.aliyun.com/portal/school/atlas/area_selector
0.canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="one" width="600" height="400" style="border: 1px solid red;"></canvas>
<script type="text/javascript">
// 里面画的东西都是像素点,没有三角形的dom元素
// canvas标签任何操作使用js,js就是笔,canvas就是画布
let canvas=document.querySelector("#one")
// 获得画布的笔
let ctx=canvas.getContext('2d')
console.log(ctx);
// (1).绘制三角形
// 起点
// ctx.moveTo(100,100)
// // 其他点,有多个
// ctx.lineTo(100,200)
// ctx.lineTo(200,200)
// // 填冲颜色
// ctx.fillStyle="red"
// ctx.fill()
// // 边线的颜色
// ctx.strokeStyle="darkgoldenrod"
// // 边线的宽度
// ctx.lineWidth=5
// ctx.closePath()
// ctx.stroke()
// (2)长方形,
// ctx.fillStyle="aqua"
// ctx.fillRect(100,200,100,200)
ctx.beginPath()
// x,y,半径,开始弧度,结束弧度,是否逆时针绘制
ctx.arc(100,100,50,0,2*Math.PI,false)
ctx.fillStyle="aqua"
ctx.fill()
ctx.stroke()
// 设置字体大小
ctx.font="20px 微软雅黑"
// 字体颜色
ctx.fillStyle="red"
// 清除画布部分/全部区域
ctx.clearRect(0,0,100,100)
ctx.fillText("数据可视化",50,20)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="one" width="800" height="420" style="border: 1px solid red;"></canvas>
<script type="text/javascript">
// 里面画的东西都是像素点,没有三角形的dom元素
// canvas标签任何操作使用js,js就是笔,canvas就是画布
let canvas=document.querySelector("#one")
// 获得画布的笔
let ctx=canvas.getContext('2d')
console.log(ctx);
ctx.font="16px 微软雅黑"
ctx.fillText("数据可视化",50,60)
ctx.moveTo(100,70)
ctx.lineTo(100,400)
ctx.lineTo(700,400)
ctx.stroke()
ctx.moveTo(100,100)
ctx.lineTo(700,100)
ctx.moveTo(250,400)
ctx.lineTo(250,410)
//
ctx.moveTo(400,400)
ctx.lineTo(400,410)
ctx.fillText("食品",170,415)
ctx.fillText("数码",310,415)
ctx.fillText("服饰",450,415)
ctx.moveTo(100,200)
ctx.lineTo(700,200)
ctx.stroke()
ctx.fillText('50',60,310)
ctx.moveTo(100,300)
ctx.lineTo(700,300)
ctx.stroke()
ctx.moveTo(100,400)
ctx.lineTo(700,400)
ctx.stroke()
ctx.fillStyle="red"
ctx.fillRect(130,200,100,200)
ctx.fillStyle="blue"
ctx.fillRect(280,200,100,200)
ctx.fillStyle="aqua"
ctx.fillRect(420,120,100,280)
</script>
</body>
</html>
0.svg
<body>
<svg class="box">
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
<line x1="200" y1="100" x2="100" y2="200" stroke="red"></line>
<!-- 绘制折线 -->
<polyline points="300 300,50,100,120,400" fill-opacity="0.5" stroke="cyan"></polyline>
<!-- 绘制矩形 -->
<rect x="400" y="400" width="150" height="50" fill="pink"></rect>
<!-- 绘制圆形 -->
<circle cx="70" cy="95" r='50' style="stroke: aqua;fill: none;"></circle>
<ellipse cx="400" cy="400" rx="70" ry="50" style="fill: #FF0000;"></ellipse>
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
1. 仪表盘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 100%;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: "多仪表盘",
x: "center",
y: 100,
show: true,
offsetCenter: [50, "20%"],
textStyle: {
fontFamily: "黑体",
color: "blue",
fontSize: 20
}
},
backgroundColor: "rgba(128,128,128,0.1)",
// 配置提示框组件
tooltip: {
formatter: "{a}<br/>{c}:{b}"
},
series: [
// 1.速度
{
name: "速度1",
type: "gauge",
z: 3,
min: 0,
max: 220,
// 大分隔数
splitNumber: 22,
// 半径大小
radius: "50%",
axisLine: {
show: true,
lineStyle: {
width: 10
}
},
axisTick: {
length: 20,
splitNumber: 5,
lineStyle: {
color: "auto",
}
},
// 分隔线就是比较大的分隔线
splitLine: {
length: 20,
lineStyle: { color: "auto" }
},
// 就是车速(km/h)
title: {
textStyle: {
fontWidth: "bolder",
fontSize: 20,
fontStyle: 'italic'
}
},
detail: {
textStyle: {
fontWeight: "bolder"
}
},
data: [{ value: 40, name: "车速(km/h)" }]
},
// 第二个盘
{
type: "gauge",
name: "转速",
max: 7,
min: 0,
center: ["20%", "55%"],
radius: "35%",
startAngle: 235,
endAngle: 45,
splitNumber: 7,
axisLine: {
lineStyle: {
width: 8
}
},
axisTick: {
length: 12,
splitNumber: 5,
lineStyle: {
color: "auto"
}
},
splitLine: {
length: 20,
lineStyle: {
color: "auto"
}
},
pointer: {
width: 5
},
title: {
offsetCenter: [0, "-30%"]
},
detail: {
textStyle: {
fontWeight: "bolder"
}
},
// value: +(Math.random() * 100).toFixed(2)
data: [{ value: +(Math.random() * 100).toFixed(2), name: "转速(1000 r/min)" }]
},
// 第三
{
type: 'gauge',
name: "油表",
startAngle: "135",
endAngle: "45",
// splitNumber:10,
max: 2,
min: 0,
center: ["77%", "50%"],
radius: "25%",
axisLine: {
lineStyle: {
width: 8,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
splitNumber: 2,
axisTick: {
splitNumber: 5,
length: 10,
lineStyle: {
color: 'auto',
}
},
axisLabel: {
formatter(v) {
switch (v + "") {
case '0': return "E";
case "1": return "油表";
case "2": return "F";
}
}
},
title: {
show: false
},
splitLine: {
distance: -30,
length: 10,
lineStyle: {
color: '#fff',
width: 1
}
},
detail: {
show: false
},
data: [
{
value: 0.5, name: "gas"
}
]
},
{
type: 'gauge',
name: "水表",
startAngle: "315",
endAngle: "225",
max: 2,
min: 0,
center: ["77%", "60%"],
radius: "25%",
axisLine: {
lineStyle: {
width: 8,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
splitNumber: 2,
axisTick: {
splitNumber: 5,
length: 10,
lineStyle: {
color: 'auto',
}
},
axisLabel: {
formatter(v) {
switch (v + "") {
case '0': return "H";
case "1": return "水表";
case "2": return "C";
}
}
},
title: {
show: false
},
splitLine: {
distance: -30,
length: 10,
lineStyle: {
color: '#fff',
width: 1
}
},
detail: {
show: false
},
data: [
{
value: 0.5, name: "gas"
}
]
},
]
};
myChart.setOption(option);
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
myChart.setOption(option,true);
}, 2000);
// 指定图表的配置项和数据
// 使用刚指定的配置项和数据显示图表。
</script>
</body>
</html>
2. 柱状图1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title:{
text:"标题",
subtext:"这里是副标题"
},
tooltip:{
// formData:"{a}{c}{b}"
},
legend:{
data:["销量"]
},
xAxis: {
// category是根据data进行分类的
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
// value就不需要data进行分类,而是自己生成数字
type: 'value'
},
series: [
{
// 与legend有关,内容要一致
name:"销量",
showBackground: true,
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
},
{
// 与legend有关,内容要一致
name:"销量",
// 这个背景是放在series的指定项里面的
showBackground: true,
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
// 指定图表的配置项和数据
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.柱状图2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.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 = {
backgroundColor: '#2c343c',
title: { //配置标题组件，包含主标题和副标题
text: '这是主标题',
textStyle: { //设置主标题样式
color: '#fff'
},
subtext: '这是副标题', //设置副标题样式
subtextStyle: {
color: '#bbb'
},
padding: [10, 0, 100, 100] //设置标题位置，用padding属性来定位
},
legend: { //配置图例组件
type: 'plain', //设置图例类型，默认为'plain'，当图例很多时可使用'scroll'
top: '1%', //设置图例相对容器位置，top\bottom\left\right
selected: {
'销量': true, //设置图例是否显示，默认为true
},
textStyle: { //设置图例内容样式
color: '#fff', //设置所有图例的字体颜色
//backgroundColor: 'black', //设置所有图例的字体背景色
},
tooltip: { //设置图例提示框,默认不显示
show: true,
color: 'red',
},
data: [ //设置图例内容
{
name: '销量',
icon: 'circle', //设置图例的外框样式
textStyle: {
color: '#fff', //单独设置某一个图例的颜色
//backgroundColor: 'black', //单独设置某一个图例的字体背景色
}
}
],
},
tooltip: { //配置提示框组件
show: true, //设置是否显示提示框，默认为true
trigger: 'item', //设置数据项图形触发
axisPointer: { //设置指示样式
type: 'shadow',
axis: 'auto',
},
padding: 5,
textStyle: { //设置提示框内容样式
color: "#fff",
},
},
grid: { //配置grid区域
show: false, //设置是否显示直角坐标系网格
top: 80, //设置相对位置，top\bottom\left\right
containLabel: false, //设置grid区域是否包含坐标轴的刻度标签
tooltip: { //鼠标焦点放在图形上，产生的提示框
show: true,
trigger: 'item', //设置触发类型
textStyle: {
color: '#fff666', //设置提示框文字的颜色
}
}
},
xAxis: { //配置x轴坐标系
show: true, //设置x轴坐标系是否显示
position: 'bottom', //设置x轴位置
offset: 0, //设置x轴相对于默认位置的偏移
type: 'category', //设置轴类型，默认'category'
name: '月份', //设置轴名称
nameLocation: 'end', //设置轴名称相对位置
nameTextStyle: { //设置坐标轴名称样式
color: "#fff",
padding: [5, 0, 0, -5],
}, //设置坐标轴名称相对位置
nameGap: 15, //设置坐标轴名称与轴线之间的距离
//nameRotate:270, //设置坐标轴名字旋转
axisLine: { //设置坐标轴轴线
show: true, //设置坐标轴轴线是否显示
symbol: ['none', 'arrow'], //设置是否显示轴线箭头
symbolSize: [8, 8], //设置箭头大小
symbolOffset: [0, 7], //设置箭头位置
lineStyle: { //设置线
color: '#fff', //设置坐标轴轴线的颜色
width: 1, //设置坐标轴轴线的线宽
type: 'solid', //设置坐标轴轴线的线型
},
},
axisTick: { //设置坐标轴刻度
show: true, //设置坐标轴刻度是否显示
inside: true, //设置坐标轴刻度是否朝内
lengt: 3, //设置长度
lineStyle: {
color: 'yellow', //设置坐标轴刻度的颜色，默认取轴线的颜色
width: 1, //设置坐标轴刻度的线宽
type: 'solid', //设置坐标轴刻度的线型
},
},
axisLabel: { //设置坐标轴标签
show: true, //设置坐标轴标签是否显示
inside: false, //设置坐标轴标签是否朝内
rotate: 0, //设置旋转角度
margin: 5,
}, //设置刻度标签与轴线之间的距离
//color:'red', }, //设置默认取轴线的颜色
splitLine: { //设置grid区域中的分隔线
show: false, //设置grid区域中的分隔线是否显示
lineStyle: {
color: 'red',
//width:1,
//type:'solid',
},
},
splitArea: { //设置网格区域
show: false,
}, //设置网格区域是否显示，默认false
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月",
"8月", "9月", "10月", "11月", "12月"]
},
yAxis: { //配置y轴坐标系
show: true, //设置网格区域是否显示
position: 'left', //设置y轴位置
offset: 0, //文字设置y轴相对于默认位置的偏移
type: 'value', //设置轴类型，默认'category'
name: '销量', //设置轴名称
nameLocation: 'end', //设置轴名称相对位置value
nameTextStyle: { //设置坐标轴名称样式
color: "#fff",
padding: [5, 0, 0, 5],
}, //设置坐标轴名称相对位置
nameGap: 15, //设置坐标轴名称与轴线之间的距离
nameRotate: 0, //设置坐标轴名字旋转
axisLine: { //设置坐标轴轴线
show: true, //设置坐标轴轴线是否显示
//-------------------箭头-------------------------
symbol: ['none', 'arrow'], //设置是否显示轴线箭头
symbolSize: [8, 8], //设置箭头大小
symbolOffset: [0, 7], //设置箭头位置
lineStyle: { //设置线
color: '#fff',
width: 1,
type: 'solid',
},
},
axisTick: { //设置坐标轴刻度
show: true, //设置坐标轴刻度是否显示
inside: true, //设置坐标轴刻度是否朝内
length: 3, //设置长度
lineStyle: {
//color:'red', //设置默认取轴线的颜色
width: 1,
type: 'solid',
},
},
axisLabel: { //设置坐标轴标签
show: true, //设置坐标轴标签是否显示
inside: false, //设置坐标轴标签是否朝内
rotate: 0, //设置旋转角度
margin: 8, //设置刻度标签与轴线之间的距离
//color:'red', //设置默认取轴线的颜色
},
splitLine: { //设置grid区域中的分隔线
show: true, //设置grid区域中的分隔线是否显示
lineStyle: {
color: '#666',
width: 1,
type: 'dashed', //设置类型
},
},
splitArea: { //设置格区域
show: false, //设置格区域是否显示，默认false
},
},
series: [{ //配置系列列表，每个系列通过type控制该系列图表类型
name: '销量', //设置系列名称
type: 'bar', //设置类型
legendHoverLink: true, //设置系列是否启用图例hover时的联动高亮
label: { //设置图形上的文本标签
show: false,
position: 'insideTop', //设置相对位置
rotate: 0, //设置旋转角度
color: '#eee',
},
itemStyle: { //设置图形的形状
color: 'blue', //设置柱形的颜色
barBorderRadius: [18, 18, 0, 0],
},
barWidth: '20', //设置柱形的宽度
barCategoryGap: '30%', //设置柱形的间距
data: [3020, 4800, 3600, 6050, 4320, 6200, 5050, 7200, 4521, 6700, 8000, 5020]
}]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
- 我们可以发现x轴或者是y轴都是有 axisLine axisLabel splitLine等等这些属性的
- 坐标轴的名字有以下这些属性:
name: ‘销量’, //设置轴名称
nameLocation: ‘end’, //设置轴名称相对位置value
nameTextStyle: { //设置坐标轴名称样式
color: “#fff”,
padding: [5, 0, 0, 5],
}, //设置坐标轴名称相对位置
nameGap: 15, //设置坐标轴名称与轴线之间的距离
nameRotate: 0,
4.柱状图3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.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 = {
tooltip: {
// 提示框是一个还是整个x轴的数据,靠近x轴的时候就会触发还是靠近点才会触发
trigger: 'axis',
// 这个是标杆
axisPointer: { //设置坐标轴指示器，坐标轴触发有效
type: 'shadow' //设置坐标轴默认为直线，可选为:'line'|'shadow'
}
},
// tooltip由axisPointer和trigger组成
legend: {
data: ['直接访问', '邮件营销', '联盟广告', '视频广告',
'搜索引擎', '百度', '谷歌', '必应', '其他']
},
toolbox: {
show: true,
// 朝向方向
orient: 'vertical',
x: 'right',
y: 'center',
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: [{
type: "category",
data: ["周一", "周二", "周三", "周四", "周五", '周六', '周日']
}],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
// stack就是一个分类,
stack: '广告', //设置堆积效果
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '广告', //设置堆积效果
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '广告', //设置堆积效果
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
// start
markLine: {
data: [
// {
// name: '平均线',
// // 支持 'average', 'min', 'max'
// type: 'average'
// },
// {
// name: 'Y 轴值为 100 的水平线',
// yAxis: 100
// },
[
{
// 起点和终点的项会共用一个 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
],
// [{
// // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
// yAxis: 'max',
// x: '90%'
// }, {
// type: 'max'
// }],
// [
// {
// name: '两个屏幕坐标之间的标线',
// x: 100,
// y: 100
// },
// {
// x: 500,
// y: 200
// }
// ]
]
}
// markLine: {
// // itemStyle: {
// // normal: {
// // lineStyle: {
// // type: 'line'
// // }
// // }
// // },
// data: [
// [{ type: 'min' }, { type: 'max' }]
// ]
// }
// end
},
{
name: '百度',
type: 'bar',
barWidth: 5,
stack: '搜索引擎', //设置堆积效果
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: '谷歌',
type: 'bar',
stack: '搜索引擎', //设置堆积效果
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: '必应',
type: 'bar',
stack: '搜索引擎', //设置堆积效果
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: '其他',
type: 'bar',
stack: '搜索引擎', //设置堆积效果
data: [62, 82, 91, 84, 109, 110, 120]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
心得:
- stack是堆的意思,就是把数据堆在一起
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
这是一个toolbox模板
5.x,y轴互换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: {
text: '世界人口总量',
subtext: '数据来自网络',
},
tooltip: {
trigger: 'axis',
axisPointer: { //设置坐标轴指示器，坐标轴触发有效
type: 'shadow' //设置坐标轴默认为直线，可选为:'line'|'shadow'
}
},
legend: {
data: ['2011年', '2012年'],
},
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: [
{
type: 'value', //设置柱状图
// 这个是数的中间是0,右边的数字是扩大原本的多少倍
boundaryGap: [0, 0],
},
],
yAxis: [
{
type: 'category',
data: ['A国', 'B国', 'C国', 'D国', 'E国', '世界人口(万)'],
},
],
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230],
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807],
},
],
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
6.一个月花费分配消费的堆柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.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: '深圳月最低生活费组成（单位:元）',
subtext: '数据来自ExcelHome',
},
tooltip: {
trigger: 'axis',
axisPointer: { //设置坐标轴指示器，坐标轴触发有效
type: 'shadow' //默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
// 就是第一个显示信息的相关信息,就是红色的那个的所有信息
console.log(params);
var tar = params[0];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
splitLine: { show: false },
data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品费用']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '辅助',
type: 'bar',
stack: '总量',
// series对象里面有itemStyle(该项的设置):normal,emphasis
itemStyle: {
normal: { //设置正常情况下柱子的样式
//barBorderColor: 'rgba(0,0,0,0)', //设置柱子边框的颜色
barBorderColor: 'rgba(20,20,0,0.5)',
barBorderWidth: 5, //设置柱子边框的宽度
//color: 'rgba(0,0,0,0)' //设置柱子的颜色
color: 'rgba(0,220,0,0.8)'
},
emphasis: { //设置鼠标滑过时柱子的样式
barBorderColor: 'rgba(0,0,0,0)', //设置鼠标滑动到柱子边框的颜色
barBorderWidth: 25, //设置鼠标滑动到柱子边框的宽度
color: 'rgba(0,0,0,0)' //设置鼠标滑动到柱子的颜色
}
},
data: [0, 1700, 1400, 1200, 300, 0]
},
{
name: '生活费',
type: 'bar', //设置柱状图
stack: '总量', //设置堆积
itemStyle: { normal: { label: {
// normal里面的label是显示数据的
show: true, position: 'inside'
} } },
data: [2900, 1200, 300, 200, 900, 300]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
- series对象里面有itemStyle(图片中该项的设置):normal,emphasis(鼠标经过的时候)
- 提示框里面的信息可以重写的,使用formatter进行重写,params就是series里面的全部对象,一般都是使用params[0],params[1]
7.线图1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.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 = {
backgroundColor: '#eee',
title: { //配置标题组件
text: "某都市的人流统计", //设置主标题
textStyle: { //设置主标题文字样式
color: 'red',
},
// 有百分比和center这些定位方式
x: 'center'
},
tooltip: { //配置提示框组件
// axis靠近x轴就显示,和出现多个数据
trigger: 'axis'
},
legend: {
data: ['人流量'],
left: 'right'
},
xAxis: [ //配置X轴坐标轴
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [ //配置Y轴坐标轴
{
type: 'value'
}
],
series: [ //配置数据系列
{
name: '人流量',
type: 'line', //设置指定显示为折线
data: [80, 125, 160, 140, 200, 245, 155],
// 表示线条是否平滑
smooth: true
},
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
8.线性阶梯图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.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: "风景名胜区门票价格", //设置主标题
textStyle: { //设置主标题文字样式
color: 'green',
},
left: 15, //适当调整标题的lef位置
top: 0 //适当调整标题的topt位置
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['景区A', '景区B', '景区C'],
left: 260, //适当调整工具框的left位置
top: 3 //适当调整工具框的top位置
},
grid: { //配置网格组件
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: { //配置工具箱组件
feature: {
// 保存图片
saveAsImage: {}
}
},
xAxis: { //配置X轴坐标系
type: 'category',
data: ['2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年']
},
yAxis: { //配置Y轴坐标系
type: 'value'
},
series: [ //配置数据系列
// 是否是阶梯线图。可以设置为 true 显示成阶梯线图，也支持设置成 'start', 'middle', 'end'
{
name: '景区A',
type: 'line', //设置指定显示为折线
step: 'start', //设置指定折线的显示样式
data: [120, 140, 120, 160, 250, 280, 240]
},
{
name: '景区B',
type: 'line', //设置指定显示为折线
step: 'middle', //设置指定折线的显示样式
data: [220, 280, 300, 350, 320, 380, 350]
},
{
name: '景区C',
type: 'line', //设置指定显示为折线
step: 'end', //设置指定折线的显示样式
data: [400, 480, 540, 450, 580, 750, 650]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
/ 1.阶梯线图。series的step可以设置为 true 显示成阶梯线图，也支持设置成 ‘start’, ‘middle’, ‘end’
2.toolbox的 saveAsImage: {}是保存图片
9.堆线形图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.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: "堆积折线图", //设置主标题
textStyle: { //设置主标题文字样式
color: 'green',
},
left: 20, //设置适当调整工具框的left位置
top: 3 //设置适当调整工具框的top位置
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['手机', '冰箱', '空调', '电视', '其他'],
left: 160, //设置适当调整工具框的left位置
top: 3 //设置适当调整工具框的top位置
},
toolbox: { //配置工具箱组件
show: true,
orient: 'vertical',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
},
top: 52, //设置适当调整工具框的top位置
left: 550 //设置适当调整工具框的left位置
},
calculable: true,
xAxis: [ //配置X轴坐标系
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [ //配置Y轴坐标系
{
type: 'value'
}
],
series: [ //配置数据系列
{
name: '手机',
type: 'line', //设置指定显示为折线
stack: '总量', //smooth:true,
color: 'rgb(0,0,0)',
itemStyle: {
normal:
{
//areaStyle: { type: 'default', color: 'rgb(174,221,139)' }
}
},
data: [434, 345, 456, 222, 333, 444, 432]
},
{
name: '冰箱',
type: 'line', //设置指定显示为折线
stack: '总量', //设置堆积
color: 'blue',
itemStyle: {
normal: {
//areaStyle: { type: 'default', color: 'rgb(107,194,53)' }
}
},
data: [420, 282, 391, 344, 390, 530, 410]
},
{
name: '空调',
type: 'line', //设置指定显示为折线
stack: '总量', //设置堆积
color: 'red',
itemStyle: {
normal: {
//areaStyle: { type: 'default', color: 'rgb(6,128,67)' }
}
},
data: [350, 332, 331, 334, 390, 320, 340]
},
{
name: '电视',
type: 'line', //设置指定显示为折线
stack: '总量', //设置堆积
color: 'green',
itemStyle: {
normal: {
//areaStyle: { type: 'default', color: 'grey' }
}
},
data: [420, 222, 333, 442, 230, 430, 430]
},
{
name: '其他',
type: 'line', //设置指定显示为折线
stack: '总量', //设置堆积
color: '#FA8072',
itemStyle: {
normal: {
//areaStyle: { type: 'default', color: 'rgb(38,157,128)' }
}
},
data: [330, 442, 432, 555, 456, 666, 877]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
10.饼图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.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: '影响健康、寿命的各类因素', //设置主标题
subtext: 'WHO统计调查报告', //设置次标题
left: 'center' //设置主次标题都左右居中
},
tooltip: { //配置提示框组件
// 饼图是item是单个数据
trigger: 'item',
// a是series的name,b是data的name,c是data的value
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { //配置图例组件
orient: 'vertical', //设置垂直排列
left: 62, //设置图例左边距
top: 22, //设置图例顶边距
data: ['生活方式', '遗传因素', '社会因素', '医疗条件', '气候环境']
},
toolbox: { //配置工具箱组件
show: true, //设置工具箱组件是否显示
left: 444, //设置工具箱左边距
top: 28, //设置工具箱顶边距
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [ //配置数据系列组件
{
name: '访问来源',
type: 'pie',
radius :[ '45%','75%'], //设置半径
//radius: ['45%', '75%'],
center: ['58%', '55%'], //设置圆心
// true是顺时针,false是逆时针
clockWise: true,
data: [ //设置数据的具体值
{ value: 60, name: '生活方式' },
{ value: 15, name: '遗传因素' },
{ value: 10, name: '社会因素' },
{ value: 8, name: '医疗条件' },
{ value: 7, name: '气候环境' }
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
11.label与labelLine
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.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 = {
title: { //配置标题组件
backgroundColor: 'yellow', //设置主标题的背景颜色
text: '某大学三大学院的专业分布', //设置主标题的文字
textStyle: { //设置主标题文字样式
color: 'green', //设置主标题文字的颜色
fontFamily: '黑体', //设置主标题文字的字体
fontSize: 28 //设置主标题文字的大小
},
x: 'center' //设置主标题左右居中
},
tooltip: { //配置提示框组件
trigger: 'item', //设置提示框的触发方式
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { //配置图例组件
orient: 'vertical', //设置图例垂直方向
x: 32, //设置图例的水平方向
y: 74, //设置图例的垂直方向
data: ['1-软件技术', '1-移动应用开发', '2-大数据技术与应用', '2-移动互联应用技术',
'2-云计算技术与应用', '3-投资与理财', '3-财务管理']
},
toolbox: { //配置工具箱组件
show: true, //设置工具箱是否显示
x: 555, //设置工具箱的水平位置
y: 74, //设置工具箱的垂直位置
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: false,
series: [
{
name: '专业名称',
type: 'pie',
// 是否支持切换选中,"单选,多选"
selectedMode: 'series',
radius: ['10%', '30%'],
label: {
position: 'inner'
},
labelLine: {
show: true
},
data: [
{ value: 1200, name: '计算机学院' },
{ value: 900, name: '大数据学院' },
{ value: 600, name: '财金学院', selected: true } //初始时为选中状态
]
},
{
name: '专业名称',
type: 'pie',
selectedMode: 'single',
radius: ['40%', '55%'],
data: [
{ value: 800, name: '1-软件技术' },
{ value: 400, name: '1-移动应用开发' },
{ value: 500, name: '2-大数据技术与应用' },
{ value: 200, name: '2-移动互联应用技术' },
{ value: 200, name: '2-云计算技术与应用' },
{ value: 400, name: '3-投资与理财' },
{ value: 200, name: '3-财务管理' }
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
1. label和labelLine,如果label开启true,才能labelLine使用,label是labelLine的一个开关,两个有关联.
12. 玫瑰图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: {
text: '二级学院分布-南丁格尔玫瑰图',
x: 'center', //设置主标题全部居中
backgroundColor: '#B5A642', //设置主标题的背景颜色为黄铜色
textStyle: { //设置主标题
fontSize: 18, //设置主标题的字号大小
fontFamily: "黑体", //设置主标题的字体
color: "#9932CD" //设置主标题的颜色为深兰花色
},
},
tooltip: { //配置提示框组件
trigger: 'item', //设置提示框的触发方式
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { //配置图例组件
x: 'center',
y: 'bottom',
data: ['计算机', '大数据', '外国语', '机器人', '建工', '机电', '艺术', '财经']
},
toolbox: { //配置工具箱组件
show: true,
x: 600, //设置工具箱的水平位置
y: 18, //设置工具箱的垂直位置
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [ //配置数据系列及格式组件
{ //设置第1个数据系列及格式设置
name: '学生人数(半径模式)',
// 空心图就是先设置饼图然后就是调整半径
type: 'pie', //南丁格尔玫瑰图属于饼图中的一种
radius: ['10%', '50%'], //设置半径
center: ['50%', 180], //设置圆心
roseType: 'radius', //设置南丁格尔玫瑰图参数：半径模式
width: '50%', // for funnel 漏斗图
max: 40, // for funnel 漏斗图
itemStyle: {
normal: {
label: {
show:false
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true
},
labelLine: {
show: true
}
}
},
data: [
{ value: 2000, name: '计算机' },
{ value: 1500, name: '大数据' },
{ value: 1200, name: '外国语' },
{ value: 1100, name: '机器人' },
{ value: 1000, name: '建工' },
{ value: 900, name: '机电' },
{ value: 800, name: '艺术' },
{ value: 700, name: '财经' }
]
},
{ //设置第2个数据系列及格式
name: '学生人数(面积模式)',
type: 'pie', //南丁格尔玫瑰图属于饼图中的一种
radius: ['10%', '50%'], //设置半径
center: ['50%', 180], //设置圆心
roseType: 'area', //设置南丁格尔玫瑰图参数:面积模式
x: '50%', // for funnel 漏斗图
max: 40, // for funnel 漏斗图
sort: 'ascending', // for funnel 漏斗图
data: [
{ value: 2000, name: '计算机' },
{ value: 1500, name: '大数据' },
{ value: 1200, name: '外国语' },
{ value: 1100, name: '机器人' },
{ value: 1000, name: '建工' },
{ value: 900, name: '机电' },
{ value: 800, name: '艺术' },
{ value: 700, name: '财经' }
]
},
{ //设置第3个数据系列及格式
name: '教授人数(面积模式)',
type: 'pie', //南丁格尔玫瑰图属于饼图中的一种
radius: ['10%', '50%'], //设置半径
center: ['50%', 420], //设置圆心
roseType: 'area', //设置南丁格尔玫瑰图参数:面积模式
x: '50%', // for funnel 漏斗图
max: 40, // for funnel 漏斗图
sort: 'ascending', // for funnel 漏斗图
data: [
{ value: 25, name: '计算机' },
{ value: 15, name: '大数据' },
{ value: 12, name: '外国语' },
{ value: 10, name: '机器人' },
{ value: 8, name: '建工' },
{ value: 7, name: '机电' },
{ value: 6, name: '艺术' },
{ value: 4, name: '财经' }
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
-
玫瑰图
// 空心图就是先设置饼图然后就是调整半径
type: ‘pie’, //南丁格尔玫瑰图属于饼图中的一种
radius: [‘10%’, ‘50%’], //设置半径
itemStyle: {
normal: {
label: {
show:false
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true
},
labelLine: {
show: true
}
}
},
有平常模式还有鼠标靠近,都有不同状态
第二章
1. 线图点和线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.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 = {
grid: { //配置网格组件
show: true, //设置网格组件是否显示
x: 15, y: 66, //设置网格左上角的位置
width: '93%', height: '80%', //设置网格的宽度和高度
x2: 100, y2: 100, //设置网格右下角的位置
// 1.边框border
borderWidth: 5, //设置网格边界线的宽度
// 边框颜色
borderColor: 'red', //设置网格的边界颜色
// 背景色
backgroundColor: '#f7f7f7', //设置背景整个网格的颜色
},
title: { //配置标题组件
text: '未来一周气温变化',
},
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轴坐标系
{
show: true,
smooth: true,
type: 'category', boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [ //配置y轴坐标系
{
show: false,
type: 'value',
axisLabel: { formatter: '{value} °C' }
}
],
series: [ //配置数据系列
{
name: '最高气温',
// 是否平滑设置
smooth: true,
type: 'line', data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: { //设置标记线
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '最低气温', smooth: true,
type: 'line', data: [1, -2, 2, 5, 3, 2, 0],
markPoint:{
data:[
{name:"周最低",value:-2,type:"min"}
]
},
markLine:{
data:[{
type:'average',name:''
}]
}
// markPoint: { //设置标记点
// data: [
// { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
// ]
// },
// markLine: { //设置标记线
// data: [
// { type: 'average', name: '平均值' }
// ]
// }
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
2.线图（多个xy轴）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.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 = {
color: ["red", 'green', 'blue', 'yellow', 'grey', '#FA8072'], //使用自己预定义的颜色
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['蒸发量', '降水量', '最低气温', '最高气温']
},
toolbox: { //配置工具箱组件
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: [ //配置x轴坐标系
{ //指定第一条x轴上的类目数据及格式
type: 'category',
position: 'bottom',
boundaryGap: true,
show: true,
axisLine: { //设置第一条x轴上的轴线
lineStyle: {
color: 'green',
type: 'solid',
width: 2
}
},
axisTick: { //设置第一条x轴上的轴刻度标记
show: true,
length: 10,
lineStyle: {
color: 'red',
type: 'solid',
width: 2
}
},
axisLabel: { //设置第一条x轴上的轴文本标记
show: true,
// 隔多少个标签显示标签，就是减少标签数量
interval: 'auto',
rotate: 45,
// 刻度线和轴的距离
margin: 18,
// 修改显示的label
formatter: '{value}月',
textStyle: {
color: 'blue',
fontFamily: 'sans-serif',
fontSize: 15,
fontStyle: 'italic',
fontWeight: 'bold'
}
},
splitLine: { //设置第一条x轴上的轴分隔线
show: true,
lineStyle: {
color: '#483d8b',
type: 'dashed',
width: 1
}
},
splitArea: { //设置第一条x轴上的轴分隔区域
show: true,
areaStyle: {
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'
]
},
//
{ //设置指定第二条x轴上的类目数据
type: 'category',
// 两个x的坐标轴，可以设置position的位置
position: "top",
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ //配置y轴组件
{ //指定第一条y轴上的数值型数据及格式
type: 'value',
position: 'left',
boundaryGap: [0, 0.1],
axisLine: { //设置第一条y轴上的轴线
show: true,
lineStyle: {
color: 'red',
type: 'dashed',
width: 2
}
},
axisTick: { //设置第一条y轴上的轴标记
show: true,
length: 10,
lineStyle: {
color: 'green',
type: 'solid',
width: 2
}
},
axisLabel: { //设置第一条y轴上的标签
show: true,
interval: 'auto',
rotate: -45,
margin: 18,
formatter: '{value} ml',
textStyle: {
color: '#1e90ff',
fontFamily: 'verdana',
fontSize: 10,
fontStyle: 'normal',
fontWeight: 'bold'
}
},
splitLine: { //设置第一条y轴上的分隔线
show: true,
lineStyle: {
color: '#483d8b',
type: 'dotted',
width: 2
}
},
splitArea: { //设置第一条y轴上的分隔区域
show: true,
areaStyle: {
color: ['rgba(205,92,92,0.3)', 'rgba(255,215,0,0.3)']
}
}
},
{ //指定第二条y轴上的数值型数据及格式
type: 'value',
splitNumber: 10,
axisLabel: { //设置第二条y轴上的数轴标签
formatter: function (value) {
return value + ' °C'
}
},
splitLine: { //设置第二条y轴上的分隔线
show: false
}
}
],
series: [ //配置数据系列
{ //第一组数据：'蒸发量'
name: '蒸发量',
type: 'bar',
yAxisIndex: 0, //指定这一组数据使用第二条y轴（右边的）
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, //指定这一组数据使用第二条y轴（右边的）
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: '最高气温',
smooth: true, //设置曲线为平滑
type: 'line',
yAxisIndex: 1, //指定这一组数据使用在第二条y轴（右边的）
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]
}
]
};
// x轴的东西是相似的，但是y轴数据种类是不一样的，所以设置y轴的index,
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
yAxisIndex用于数据校对哪个y轴,在series之中使用
3.线图的titile
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 650px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
mytextStyle = { //定义自己的文本格式变量
color: "blue", //设置文字颜色
fontStyle: "normal", //italic斜体oblique倾斜
fontWeight: "normal", //设置文字粗细bold|bolder|lighter|100|200|300|400...
fontFamily: "黑体", //设置字体系列
fontSize: 14, //设置字体大小
};
//指定图表的配置项和数据
option = {
grid: { //配置网格组件
show: true, //设置网格组件是否显示
x: 15, y: 66, //设置网格左上角的位置
borderColor: '#FA8072', //设置网格的边界颜色
},
title: { //配置标题组件
show: true, //设置标题组件是否显示
text: "未来一周气温变化", //设置主标题
subtext: "折线图", //设置副标题
target: "blank", //'self'当前窗口打开，'blank'新窗口打开
subtarget: "blank", //设置副标题打开链接的窗口
// 1.textAlign textBaseline
textAlign: "center", //设置文本水平对齐
textBaseline: "top", //设置文本垂直对齐
textStyle: mytextStyle, //设置标题样式
//subtextStyle: mytextStyle, //设置副标题样式
padding: 5, //设置标题内边距
itemGap: 10, //设置主副标题间距
//设置所属图形的Canvas分层，zlevel大的Canvas会放在zlevel小的Canvas的上面
zlevel: 0,
z: 2, //设置所属组件的z分层，z值小的图形会被z值大的图形覆盖
left: "10%", //设置组件离容器左侧的距离，'left'，'center'，'right'，'20%'
top: "10", //设置组件离容器上侧的距离，'top'，'middle'，'bottom'，'20%'
right: "auto", //设置组件离容器右侧的距离，'20%'
bottom: "auto", //设置组件离容器下侧的距离，'20%'
backgroundColor: "yellow", //设置标题背景色
borderColor: "#ccc", //设置边框颜色
borderWidth: 2, //设置边框线宽
shadowColor: "red", //设置阴影颜色
shadowOffsetX: 0, //设置阴影水平方向上的偏移距离
shadowOffsetY: 0, //设置阴影垂直方向上的偏移距离
shadowBlur: 30 //设置阴影的模糊大小
},
// titile(
// textAlign: "center", //设置文本水平对齐
// textBaseline: "top", //设置文本垂直对齐
// padding: 5, //设置标题内边距
// itemGap: 10, //设置主副标题间距
// shadowColor: "red", //设置阴影颜色
// shadowOffsetX: 0, //设置阴影水平方向上的偏移距离
// shadowOffsetY: 0, //设置阴影垂直方向上的偏移距离
// shadowBlur: 30 //设置阴影的模糊大小
// )
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轴坐标系
{
show: false, type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [ //配置y轴坐标系
{
show: false, type: 'value',
axisLabel: { formatter: '{value} °C' }
}
],
series: [ //配置数据系列
{
name: '最高气温',
smooth: true, type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [{
type: "max", name: "最大值"
}, {
type: "min", name: "最小值"
}]
},
markLine: {
data: [{ type: 'average', name: '平均值' }]
}
},
{
name: '最低气温',
smooth: true, 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: '平均值' }]
}
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
4.一个div放多个图表(重要)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
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, 9.96], [6, 7.24], [4, 4.26], [12, 10.84], [7, 4.82], [5.0, 5.68]],
[[10, 9.14], [8.0, 8.14], [13, 8.74], [9, 8.77], [11, 9.26], [14.0, 8.1],
[6.0, 6.13], [4.0, 3.10], [12.0, 9.13], [7, 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: [ //配置标题组件
{ text: titles[0], textAlign: 'center', left: '25%', top: '1%' },
{ text: titles[1], left: '73%', top: '1%', textAlign: 'center' },
{ 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: [ //配置x轴坐标系
{ 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: [ //配置y轴坐标系
{ 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: [ //配置数据系列
{ //设置数据系列1
name: 'I', type: 'scatter',
xAxisIndex: 0, yAxisIndex: 0,
data: dataAll[0],
//markLine:markLineOpt
},
{ //设置数据系列2
name: 'II', type: 'scatter',
xAxisIndex: 1, yAxisIndex: 1,
data: dataAll[1], //markLine:markLineOpt
},
{ //设置数据系列3
name: 'III', type: 'scatter',
xAxisIndex: 2, yAxisIndex: 2,
data: dataAll[2], //markLine:markLineOpt
},
{ //设置数据系列4
name: 'IV', type: 'scatter',
xAxisIndex: 3, yAxisIndex: 3,
data: dataAll[3], //markLine:markLineOpt
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
心得:
1.series和x,y和grid的数据无法自动寻找,使用我们需要gridIndex ,xAxisIndex,yAxisIndex,xy坐标轴先校对grid,之后用series校对xy轴的index
2.把数据提取到外面出来!!!,这样可以在请求其他数据的时候,方便修改
5.混合图legend
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
color: ["red", 'green', 'blue', 'grey'], //使用自己预定义的颜色
legend: {
orient: 'horizontal', //'vertical'
x: 'right', //'center'|'left'|{number},
y: 'top', //'center'|'bottom'|{number}
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
// 内边距
padding: 10,
// 项之间的间隔
itemGap: 20,
textStyle: { color: 'red' },
},
xAxis: { //配置x轴坐标系
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [ //配置y轴坐标系
{ //设置第1条y轴
type: 'value',
axisLabel: { formatter: '{value} ml' }
},
{ //设置第2条y轴
type: 'value',
axisLabel: { formatter: '{value} °C' },
splitLine: { show: false }
}
],
series: [ //配置数据系列
{ //设置数据系列1
name: '某一年的蒸发量', type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
},
{ //设置数据系列2
name: '某一年的降水量', smooth: true,
type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]
},
{ //设置数据系列3
name: '某一年的最高气温', type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
},
{ //设置数据系列4
name: '某一年的最低气温', smooth: true,
type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
7. legend的滚轮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
color: ['red', 'green', 'blue', 'grey'], //使用自己预定义的颜色
legend: {
// 这个是一个滚动的,可以减少标签占用的空间.
type: 'scroll', //设置为滚动图例，type属性默认值为'plain'（普通图例，不滚动）
orient: 'horizontal', //'vertical'
x: 'right', //'center'|'left'|{number},
y: 'top', //'center'|'bottom'|{number}
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
padding: 10,
itemGap: 20,
textStyle: { color: 'red' },
},
xAxis: { //配置x轴坐标系
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [ //配置y轴坐标系
{ //设置第1条y轴坐标系
type: 'value',
axisLabel: { formatter: '{value} ml' }
},
{ //设置第2条y轴坐标系
type: 'value',
axisLabel: { formatter: '{value} °C' },
splitLine: { show: false }
}
],
series: [ //配置数据系列
{ //设置数据系列1
name: '某一年的蒸发量 ', type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
},
{ //设置数据系列2
name: '某一年的降水量 ', smooth: true,
type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]
},
{ //设置数据系列3
name: '某一年的最高气温 ', type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
},
{ //设置数据系列4
name: '某一年的最低气温 ', smooth: true,
type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
8.数据轴缩放
dataZoom: { //配置数据区域缩放
show: true,
realtime: true,
start: 0, end: 80
},
// 和axis,yxis轴同级
9.dataZoom实际运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data1 = [];
var data2 = [];
var data3 = [];
var random = function (max) {
return (Math.random() * max).toFixed(3);
// toFixed是取小数三个.
};
for (var i = 0; i < 500; i++) {
data1.push([random(15), random(10), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
}
// [
// "3.337",
// "2.951",
// "0.489"
// ]
// 第一个x轴,第二个是y轴,第三个是大小
option = {
// 开启动画
animation: true,
legend: {
data: ['scatter', 'scatter2', 'scatter3']
},
tooltip: {},
xAxis: {
type: 'value',
// data是最大的
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
// 可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
dataZoom: [
// dataZoom里面的数据需要绑定x,y轴的index
// slider是外部的滑块,inside是外部的滑块
{
type: 'slider',
show: true,
xAxisIndex: [0],
// 可视化范围,其他需要拖动
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
// 存放在偏左的那个方位
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: [0],
start: 24,
end: 35
},
{
type: 'inside',
yAxisIndex: [0],
start: 0,
end: 10
}
],
series: [
{
name: 'scatter',
// 气泡图类型
type: 'scatter',
color: "red",
itemStyle: {
normal: {
// 平常为红色
opacity: 0.8
},
// 靠近变色
emphasis: { //设置鼠标滑过时柱子的样式
// // barBorderColor: 'rgba(0,0,0,0)', //设置鼠标滑动到柱子边框的颜色
// barBorderWidth: 25, //设置鼠标滑动到柱子边框的宽度
color: 'blank' //设置鼠标滑动到柱子的颜色
}
},
// 重新赋值自己的大小,symbolSize是自己的大小
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
console.log(val);
return val[2] * 40;
},
data: data3
}
]
};
// 指定图表的配置项和数据
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
10.映射图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.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"));
let dataBJ = [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
[6, 82, 58, 90, 1.77, 68, 33, '良'],
[7, 74, 49, 77, 1.46, 48, 27, '良'],
[8, 78, 55, 80, 1.29, 59, 29, '良'],
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
[10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
[11, 39, 19, 38, 0.57, 31, 15, '优'],
[12, 41, 11, 40, 0.43, 21, 7, '优'],
[13, 64, 38, 74, 1.04, 46, 22, '良'],
[14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
[15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
[16, 33, 6, 29, 0.34, 13, 5, '优'],
[17, 94, 66, 110, 1.54, 62, 31, '良'],
[18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
[19, 57, 31, 54, 0.96, 32, 14, '良'],
[20, 22, 8, 17, 0.48, 23, 10, '优'],
[21, 39, 15, 36, 0.61, 29, 13, '优'],
[22, 94, 69, 114, 2.08, 73, 39, '良'],
[23, 99, 73, 110, 2.43, 76, 48, '良'],
[24, 31, 12, 30, 0.5, 32, 16, '优'],
[25, 42, 27, 43, 1, 53, 22, '优'],
[26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
[27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
[28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
[29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
[30, 52, 24, 60, 1.03, 50, 21, '良'],
[31, 46, 5, 49, 0.28, 10, 6, '优']
];
//指定图表的配置项和数据
var option = {
backgroundColor: '#eee',
title: { //配置标题组件
text: "北京api数据", //设置主标题
textStyle: { //设置主标题文字样式
color: 'red',
},
// 有百分比和center这些定位方式
x: 'center'
},
tooltip: { //配置提示框组件
// axis靠近x轴就显示,和出现多个数据
trigger: 'axis'
},
legend: {
data: ['人流量'],
left: 'right'
},
xAxis: [ //配置X轴坐标轴
{
type: 'category',
data: dataBJ.map(function(item){
return item[0]
}),
}
],
yAxis: [ //配置Y轴坐标轴
{
type: 'value'
}
],
series: [ //配置数据系列
{
name: '雨量',
type: 'line', //设置指定显示为折线
data: dataBJ.map(function(item){
return item[1]
}),
// 表示线条是否平滑
smooth: true,
// markLine: {
// lineStyle: {
// color: "red"
// },
// data: [{ yAxis: 40 }, { yAxis: 80 }, { yAxis: 120 }]
// }
},
],
// 映射组件
visualMap: [
{ // 第一个 visualMap 组件
type: 'continuous', // 定义为连续型 visualMap
// type: 'piecewise', // 定义为分段型 visualMap
// 最小值
min: 30,
// 最大值
max: 300,
// 是否连续
calculableL: true,
// piecewise的属性进行坐标和和块进行分块
pieces: [
{ gt: 220, lte: 300, color: "red" }, // (900, 1500]
{ gt: 100, lte: 220, color: "yellow" }, // (310, 1000]
{ lt: 100, color: "green" } // (-Infinity, 5)
],
// 文本
text: ["数据范围"],
// 宽高
itemWidth: 30,
itemHeight: 130,
// 坐标轴渐变颜色设置和点大小
inRange: {
color: ['green', 'yellow', 'red'],
// symbolSize: [30, 100]
},
left: "90%",
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
let dataBJ = [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
[6, 82, 58, 90, 1.77, 68, 33, '良'],
[7, 74, 49, 77, 1.46, 48, 27, '良'],
[8, 78, 55, 80, 1.29, 59, 29, '良'],
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
[10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
[11, 39, 19, 38, 0.57, 31, 15, '优'],
[12, 41, 11, 40, 0.43, 21, 7, '优'],
[13, 64, 38, 74, 1.04, 46, 22, '良'],
[14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
[15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
[16, 33, 6, 29, 0.34, 13, 5, '优'],
[17, 94, 66, 110, 1.54, 62, 31, '良'],
[18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
[19, 57, 31, 54, 0.96, 32, 14, '良'],
[20, 22, 8, 17, 0.48, 23, 10, '优'],
[21, 39, 15, 36, 0.61, 29, 13, '优'],
[22, 94, 69, 114, 2.08, 73, 39, '良'],
[23, 99, 73, 110, 2.43, 76, 48, '良'],
[24, 31, 12, 30, 0.5, 32, 16, '优'],
[25, 42, 27, 43, 1, 53, 22, '优'],
[26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
[27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
[28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
[29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
[30, 52, 24, 60, 1.03, 50, 21, '良'],
[31, 46, 5, 49, 0.28, 10, 6, '优']
];
//指定图表的配置项和数据
var option = {
backgroundColor: '#eee',
title: { //配置标题组件
text: "北京api数据", //设置主标题
textStyle: { //设置主标题文字样式
color: 'red',
},
// 有百分比和center这些定位方式
x: 'center'
},
tooltip: { //配置提示框组件
// axis靠近x轴就显示,和出现多个数据
trigger: 'axis'
},
legend: {
left: 'right'
},
xAxis: [ //配置X轴坐标轴
{
type: 'category',
data: dataBJ.map(function (item) {
return item[0]
}),
}
],
yAxis: [ //配置Y轴坐标轴
{
type: 'value'
}
],
series: [ //配置数据系列
{
// name: '雨量',
type: 'line', //设置指定显示为折线
data: dataBJ.map(function (item) {
return item[1]
}),
// 表示线条是否平滑
smooth: true,
// markLine: {
// lineStyle: {
// color: "red"
// },
// data: [{ yAxis: 40 }, { yAxis: 80 }, { yAxis: 120 }]
// }
},
],
// 映射组件
visualMap: [
{ // 第一个 visualMap 组件
// hoverLink:true,
type: 'piecewise', // 定义为分段型 visualMap
// piecewise:true, // 进行分块
// splitNumber:,
// 最小值
// min: 30,
// // 最大值
// max: 300,
// // 是否连续
// piecewise的属性进行坐标和和块进行分块
// calculableL: true,
// 重要属性
pieces: [
{ gt: 250, lte: 300, color: "#aa069f" }, // (900, 1500]
{ gt: 200, lte: 250, color: "red" }, // (900, 1500]
{ gt: 150, lte: 200, color: "#fc7d02" }, // (310, 1000]
{ gt: 100, lte: 150, color: "yellow" }, // (310, 1000]
{ lt: 100, color: "green" } // (-Infinity, 5)
],
// 文本
// // 宽高
// // 坐标轴渐变颜色设置和点大小
left: "85%",
top: "10%"
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
type: 'piecewise’的pieces
type: ‘continuous’, 需要pieces,isrange
第三章
模拟异步请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
color: ["Purple", "LimeGreen"],
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
lengend: {},
series: [
{
name: "男",
type: "bar",
data: [],
itemStyle: {
normal: {
label: {
show: true,
position: 'top'
}
}
}
},
{
name: "女",
type: "bar",
data: [],
itemStyle: {
normal: {
label: {
show: true, position: 'top'
}
}
}
},
]
})
myChart.showLoading({
text: "请您休息一下",
color: "blue",
textColor: "red",
});
$.get("ch6_5_3_data.json").done(function (data) {
// console.log(data["data"][2]);
var d = data
var boyList = [] //男生
var girlList = []
var specList = []
// console.log(specList);有时候x轴显示不完整可能是不够宽度
for (var i = 0; i < d.data.length; i++) {
if (d.data[i].sex == "男") {
boyList.push(d.data[i].value)
specList.push(d.data[i].specName)
} else {
girlList.push(d.data[i].value)
}
}
myChart.setOption({
xAxis: { data: specList },
yAxis: {},
series: [{ name: '男', type: 'bar', data: boyList },
{ name: '女', type: 'bar', data: girlList }
]
})
myChart.hideLoading()
// 1. JSON文件格式就是json数据,必须要满足json的严格要求
// var data1='{"name":123}'
// 2. 当我们去请求json文件的时候,返回的是js对象格式
// JSON.stringify(data1)
// console.log(JSON.parse(data1));
})
// 指定图表的配置项和数据
// 使用刚指定的配置项和数据显示图表。
</script>
</body>
</html>
itemStyle: {
normal: {
label: {
show: true,
position: 'top'
}
}
}
bar的label是数据数值
2.先设定好基本框架(数据先为空),之后进行请求数据,提取数据一个series的index放的是一个同类数据
7889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
