二 折线图（line）
2.1 基础折线图
- s e ries 中的type设置为【t ype:line 】
2.2 平滑折线图
- 添加一个属性： smooth:true, // 平滑 反之则不平滑
2.3 基础面积图
- 添加一个属性： areaStyle:{},
2.4 堆叠面积图
- 在每一个对象中 添加一个属性： stack:’
求第二个的大小： 第二个值- 第一个值
2.4.1 案例
1tooltip. axisPointer
2 grid
grid 区域是否包含坐标轴的刻度标签。
containLabel 为 false 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。
containLabel 为 true 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
3说明：x坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
3 xAxis.axisLine. lineStyle
4 areaStyle 区域面积
5 showSymbol: false,
是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
6 代码
option = {
backgroundColor: '#394056',
title: {
text: '航线上座率分析',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '9%'
},
tooltip: {
trigger: 'axis',//柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',//长方形：可以是圆，椭圆，图片等。。。
itemWidth: 14,//图标宽
itemHeight: 5,
itemGap: 13,//图例每项之间的间隔。
data: ['南宁-曼芭', '桂林-曼芭', '南宁-甲米'],
right: '4%',
textStyle: {//文字颜色
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
left: '9%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 30,
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: '南宁-曼芭',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 5// 线的粗细
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(137, 189, 27, 0.8)'
}, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),//区域颜色： 渐变色 第四位是透明度
shadowColor: 'rgba(0, 0, 0, 0.1)',//阴影颜色
shadowBlur: 10
}
},
itemStyle: {// 线的颜色：看绿色
normal: {
color: 'rgb(137,189,27)'
}
},
data: [96.3,96.4,97.5,95.6,98.1,94.8,89.6,94.1,80.1,52.4,75.8,94.7]
}, {
name: '桂林-曼芭',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)'
}
},
data: [97.3,99.2,99.3,100.0,99.6,90.6,80.0,91.5,69.8,67.5,90.4,84.9]
}, {
name: '南宁-甲米',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(219,50,51)'
}
},
data: [84.2,81.0,67.5,72.1,43.7,88.5,91.9,101.8,79.7,87.6,92.9,0]
}, ]
};
2.5 案例
看图找点：
-
12 摄氏度 （格式化文字）： label里边使用for ma to r
-
y轴起点不是0 ： min： 8
-
折线和刻度顶到头： boundaryGap:false
-
图表标线： markLine 下边有
注意 在series 当中
-
图表标注： markPoint
-
显示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="ec" style="width:600px;height:400px"></div>
</body>
<script>
var ech = document.getElementById("ec")
var mychart = echarts.init(ech)
var options = {
tooltip:{},
toolbox:{
feature:{
dataZoom:{},
dataView:{},
magicType:{
type:['line','bar']
},
restore:{},
saveAsImage:{}
}
},
xAxis:{
type:'category',
data:['周一','周二','周三','周四','周五','周六','周末'],
// boundaryGap:false,
axisTick:{
// alignWithLabel:true
}
},
yAxis:{
type:'value',
axisLabel:{
formatter: '{value} ℃'
}
},
series:[{
name:"温度变化情况",
type:'line',
data:[50,80,90,23,67,50,32],
markPoint:{
data:[
{
name: '最大值',
type: 'max'
},
{
name: '最小值',
type: 'min'
}
]
},
markLine:{
data:[
{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
}
]
}
}]
}
mychart.setOption(options)
</script>
</html>
2.6 案例
let bgColor = "#fff";
let color = [
"#0090FF",
"#36CE9E",
"#FFC005",
"#FF515A",
"#8B5CFF",
"#00CA69"
];
let echartData = [{
name: "1",
value1: 100,
value2: 233
},
{
name: "2",
value1: 138,
value2: 233
},
{
name: "3",
value1: 350,
value2: 200
},
{
name: "4",
value1: 173,
value2: 180
},
{
name: "5",
value1: 180,
value2: 199
},
{
name: "6",
value1: 150,
value2: 233
},
{
name: "7",
value1: 180,
value2: 210
},
{
name: "8",
value1: 230,
value2: 180
}
];
let xAxisData = echartData.map(v => v.name);
// ["1", "2", "3", "4", "5", "6", "7", "8"]
let yAxisData1 = echartData.map(v => v.value1);
// [100, 138, 350, 173, 180, 150, 180, 230]
let yAxisData2 = echartData.map(v => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
}
option = {
backgroundColor: bgColor,
color: color,
legend: {
right: 10,
top: 10
},
tooltip: {
trigger: "axis",
formatter: function(params) {
let html = '';
params.forEach(v => {
console.log(v)
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
${v.seriesName}.${v.name}
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
万元`;
})
return html
},
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
axisPointer: {
type: 'shadow',
// shadowStyle: {
// color: '#ffffff',
// shadowColor: 'rgba(225,225,225,1)',
// shadowBlur: 5
// }
}
},
grid: {
top: 100,
containLabel: true
},
xAxis: [{
type: "category",
boundaryGap: false,
axisLabel: {
formatter: '{value}月',
textStyle: {
color: "#333"
}
},
axisLine: {
lineStyle: {
color: "#D9D9D9"
}
},
data: xAxisData
}],
yAxis: [{
type: "value",
name: '单位：万千瓦时',
axisLabel: {
textStyle: {
color: "#666"
}
},
nameTextStyle: {
color: "#666",
fontSize: 12,
lineHeight: 40
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#E9E9E9"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [{
name: "2018",
type: "line",
smooth: true,
showSymbol: false,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[0],
shadowBlur: 3,
shadowColor: hexToRgba(color[0], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[0], 0.3)
},
{
offset: 1,
color: hexToRgba(color[0], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[0], 0.1),
shadowBlur: 10
}
},
data: yAxisData1
}, {
name: "2019",
type: "line",
smooth: true,
// showSymbol: false,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[1],
shadowBlur: 3,
shadowColor: hexToRgba(color[1], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[1], 0.3)
},
{
offset: 1,
color: hexToRgba(color[1], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[1], 0.1),
shadowBlur: 10
}
},
data: yAxisData2
}]
};
参考：
https://www.makeapie.cn/echarts_content/xiYTXi-W4v.html
2.7案例
- showSymbol: true
{
grid: {
top: '10',
left: '28',
right: '38',
bottom: '52',
containLabel: true//防止标签溢出
},
legend: {
show: true,
bottom: '20', //位置
icon: 'circle', //图例形状
textStyle: {
// 文本样式
fontFamily: 'PingFangSC-Regular',
fontWeight: '400',
color: '#666666'
}
},
color: ['#20D57A'],
xAxis: {
type: 'category',
data: [],
axisLine: {
//刻度线
lineStyle: {
color: '#C6C5CA'
}
},
axisLabel: {
// x轴 刻度标签
color: '#666666'
},
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value',
axisLabel: {
// Y轴 刻度标签
color: '#999999',
fontSize: '12'
},
splitLine: {
//分割线
lineStyle: {
type: 'dashed',
color: '#E5E4E9'
}
}
},
tooltip: {
trigger: 'axis', //默认线的
backgroundColor: 'rgba(13, 23, 43, 0.74)', //弹框 背景颜色
borderColor: 'rgba(13, 23, 43, 0)', //弹框 边框
textStyle: {
弹框 文字样式
color: '#fff'
}
},
series: [
{
data: [],
type: 'line',
name: '访客数',
// showSymbol: false,//不展示圆点
symbol: 'circle',
symbolSize: '6',//圆点的大小
lineStyle: {
width: 1
},
emphasis: {
itemStyle: {
color: '#20D57A'
}
}
}
]
}
1229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
