>#### 面积图标线
~~~
option = {
title: {
text: '面积图标线',
left: 'center',
top: '10px',
textStyle: {
color: '#ffffff'
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
backgroundColor: "#0f375f",
xAxis: {
type: 'category',
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
axisLine: { // 改变x轴颜色
lineStyle: {
color: '#26D9FF'
}
},
axisLabel: { // 改变x轴字体颜色和大小
textStyle: {
color: "rgba(250,250,250,0.6)",
fontSize: 16
},
},
axisTick: { //坐标轴刻度相关设置
show: false
},
splitLine: { //坐标轴在 grid 区域中的分隔线。设置不显示后其余相关设置不可见
show: false,
lineStyle: {
color: ['#315070'],
width: 1,
type: 'solid'
}
},
boundaryGap: false //调整留白策略，去除区域两侧空白
},
yAxis: {
type: 'value',
axisLine: { // 改变y轴颜色
show: true,
lineStyle: {
color: '#26D9FF',
width: 1,
type: 'solid'
}
},
axisLabel: { // 改变y轴字体颜色和大小
//formatter: '{value} m³ ', // 给y轴添加单位
textStyle: {
color: "rgba(250,250,250,0.6)",
fontSize: 16
},
},
axisTick: { //坐标轴刻度相关设置
show: false
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: {
color: ['#315070'],
width: 1,
type: 'solid'
}
}
},
series: [{
smooth: true, //false为直线，true为曲线
symbol: 'circle', //标记类型包括'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
symbolSize: 7, //标记大小
markPoint: {
symbol: "circle"
},
markLine: {
symbol: ['none', 'arrow'],
label: {
normal: {
color: "#fff",
backgroundColor: 'rgba(228,0,54,70)',
fontSize: 16,
padding: 4,
borderRadius: 4,
show: true,
position: 'start',
distance: 4
}
},
lineStyle: {
type: "solid",
color: 'rgba(228,0,54,60)',
width: 2
},
data: [{yAxis: 400
}]
},
data: [220, 332, 601, 234, 490, 730, 590],
type: 'line',
itemStyle: {
normal: {
label: {
show: true,
color: "#fff",
fontSize: 12
},
color: "#294E8F",
borderColor: "3D7EEB",
borderWidth: 2,
}
},
lineStyle: {
normal: {
width: 2,
color: "#327BFA",
shadowColor: "#3D7EEB",
shadowBlur: 10
}
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0.5,
color: 'rgba(61,126,235,0.5)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(61,126,235,0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}],
animationDuration: 2000 //初始动画时长
};
~~~
>#### 效果图
<hr>
>#### 可拖动X轴
~~~
option = {
title: {
top: '0',
left: 'center',
text: '可拖动X轴',
textStyle: {
align: 'center',
color: '#FFFFFF',
fontSize: 22,
}
},
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
x: 'center',
y: '40px',
textStyle: {
color: '#f2f2f2',
fontSize: 13,
},
icon: 'circle',
data: ['数据一', '数据二']
},
dataZoom: [{
type: 'slider',
show: true,
height: 20,
left: '10%',
right: '10%',
bottom: '2%',
start: 0,
end: 100,
textStyle: {
color: '#d4ffff',
fontSize: 11,
},
}, {
type: 'inside'
}
],
grid: {
right: '5%',
bottom: '10%',
left: '2%',
top: '80px',
containLabel: true
},
xAxis: [{
type: 'category',
data: xData,
name: '时间',
nameTextStyle: {
color: '#d4ffff'
},
axisLine: {
lineStyle: {
color: '#0B4CA9'
}
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#FFF",
fontSize: 12,
},
},
}],
yAxis: [{
type: 'value',
name: '次数',
nameTextStyle: {
color: '#d4ffff'
},
position: 'left',
axisLine: {
lineStyle: {
color: '#0B4CA9'
}
},
splitLine: {
lineStyle: {
color: "#0B4CA9",
}
},
axisLabel: {
color: '#d4ffff',
fontSize: 12,
}
},],
series: [{
name: '数据一',
type: 'line',
yAxisIndex: 0,
symbolSize: 12,
itemStyle: {
normal: {
color: '#FC30EE',
}
},
data: yData1
},
{
name: '数据二',
type: 'line',
yAxisIndex: 0,
symbolSize: 12,
itemStyle: {
normal: {
color: '#0EF100',
}
},
data: yData2
}
]
};
~~~
>#### 效果图
<hr>
>#### 特殊数据标签
~~~
backgroundColor = '#0f375f';
chartdata = [600, 650, 500, 550, 500, 600];
categoryData = [2010, 2015, 2017, 2018, 2020, 2022];
nameArr = '原煤';
linecolor = 'rgb(149,232,255)';
linewidth = 2;
areacolor = 'rgba(149,232,255,0.3)';
smooth = true;
showSymbol = true;
var color = linecolor;
var color1 = areacolor;
var max = 550;
option = {
title: {
top: '10',
left: 'center',
text: '特殊数据标签',
textStyle: {
align: 'center',
color: '#FFFFFF',
fontSize: 18,
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
backgroundColor: backgroundColor,
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.5)',
axisPointer: {
type: 'line',
lineStyle: {
type: 'dashed',
color: '#fff',
},
},
textStyle: {
align: 'left',
color: '#fff'
},
formatter: (params) => {
param = params[0];
return param.seriesName + param.value
}
},
grid: {
top: '10%',
left: '5%',
right: '5%',
bottom: '8%',
containLabel: true,
show: true,
borderColor: 'transparent',
backgroundColor: 'rgba(25, 163, 209,0.08)',
},
xAxis: [{
type: 'category',
data: categoryData,
axisTick: {
show: false, // 是否显示坐标轴轴线
},
axisLabel: {
color: '#fff',
},
splitLine: {
show: false,
},
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。
show: true,
inside: false,
lineStyle: {
color: '#0e7675',
},
},
},],
yAxis: [{
type: 'value',
splitNumber: 4,
splitLine: {
show: false
},
axisLabel: {
//坐标轴刻度标签的相关设置。
show: true,
formatter: (val) => {
return val;
},
textStyle: {
color: '#fff',
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: 'rgba(25, 163, 209,0.1)',
type: 'solid',
},
},
show: true,
},],
dataZoom: [{
show: false,
xAxisIndex: [0],
left: 0,
bottom: 30,
start: 1,
end: 100,
handleSize: '100%',
handleStyle: {
color: '#5B3AAE',
},
textStyle: {
color: 'rgba(204,187,225,0.5)',
},
fillerColor: 'rgba(67,55,160,0.4)',
borderColor: 'rgba(204,187,225,0.5)',
},
{
type: 'inside',
show: true,
start: 1,
end: 100,
},
],
series: [{
name: nameArr,
type: 'line',
smooth: smooth,
showSymbol: showSymbol,
symbol: 'circle',
symbolSize: 16,
itemStyle: {
color: (params) => {
if (params.value <= max) {
return {
type: 'radial',
colorStops: [{
offset: 0,
color: color,
},
{
offset: 0.5,
color: color,
},
{
offset: 0.5,
color: 'transparent',
},
{
offset: 0.9,
color: 'transparent',
},
{
offset: 0.9,
color: color,
},
{
offset: 1,
color: color,
},
],
};
} else {
return {
type: 'radial',
colorStops: [{
offset: 0,
color: 'yellow',
},
{
offset: 0.5,
color: 'yellow',
},
{
offset: 0.5,
color: 'transparent',
},
{
offset: 0.9,
color: 'transparent',
},
{
offset: 0.9,
color: 'yellow',
},
{
offset: 1,
color: 'yellow',
},
],
};
}
},
},
label: {
show: true,
position: 'top',
formatter: (params) => {
if (params.data > max) {
return '{a|' + params.data + '}';
} else {
return '';
}
},
color: '#fff',
backgroundColor: '#201702',
borderRadius: 4,
borderColor: 'yellow',
borderWidth: 1,
shadowColor: 'yellow',
shadowBlur: 5,
align: 'center',
rich: {
a: {
padding: [8, 12],
},
},
},
lineStyle: {
color: color,
width: linewidth,
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: color1, // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0,0,0,0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: chartdata,
},
{
name: '',
type: 'line',
smooth: smooth,
symbol: 'circle',
symbolSize: 16,
itemStyle: {
color: (params) => {
if (params.value <= max) {
return {
type: 'radial',
colorStops: [{
offset: 0,
color: color,
},
{
offset: 0.5,
color: color,
},
{
offset: 0.5,
color: 'transparent',
},
{
offset: 0.9,
color: 'transparent',
},
{
offset: 0.9,
color: color,
},
{
offset: 1,
color: color,
},
],
};
} else {
return {
type: 'radial',
colorStops: [{
offset: 0,
color: 'yellow',
},
{
offset: 0.5,
color: 'yellow',
},
{
offset: 0.5,
color: 'transparent',
},
{
offset: 0.9,
color: 'transparent',
},
{
offset: 0.9,
color: 'yellow',
},
{
offset: 1,
color: 'yellow',
},
],
};
}
},
},
label: {
show: true,
position: 'bottom',
formatter: (params) => {
if (params.data > max) {
return '新高';
} else {
return '';
}
},
color: 'yellow',
},
lineStyle: {
color: 'transparent',
width: linewidth,
},
areaStyle: {
color: 'transparent',
},
data: chartdata,
},
],
};
~~~
>#### 效果图
<hr>
>#### 分割线上下异色
~~~
var datas = [0, -5, -20, 10, 10, 20, -15];
var max = Math.max.apply(null, datas);
var min = Math.min.apply(null, datas);
var mNum = 0;
var offset = 0;
if (parseInt(min) <= 0) {
if (parseInt(max) <= 0) {
mNum = -1;
} else {
mNum = 0;
offset = Math.abs(min) / (Math.abs(min) + Math.abs(max));
}
} else {
mNum = 1;
}
var datawc = 0.01; //线条误差单项占比0.1%;
var datapre = 0;
var dataprevaule = 0;
var datazf = 0;
colorStopIs = [];
xbColor = "#F44413";
sbColor = "#1DBE90";
$.each(datas, function (index, value) {
if (index == (datas.length - 1)) { //最后一项
if (value > datazf) { //当前项在分割线之上
if (datapre == datazf || datapre > datazf) { //上一项位于分割线上
colorStopIs.push({
offset: 1,
color: sbColor,
});
datapre = 1;
dataprevaule = value;
} else { //上一项位于分割线下
colorStopIs.push({
offset: (((index - 1) + (Math.abs(dataprevaule) / (Math.abs(dataprevaule) +
Math.abs(value)))) / (datas.length - 1)),
color: xbColor,
});
colorStopIs.push({
offset: (((index - 1 + datawc) + (Math.abs(dataprevaule) / (Math.abs(dataprevaule) +
Math.abs(value)))) / (datas.length - 1)),
color: sbColor,
});
colorStopIs.push({
offset: 1,
color: sbColor,
})
datapre = 1;
dataprevaule = value;
}
} else { //当前项在分割线之下
if (datapre == datazf || datapre < datazf) { //上一项位于分割线下
colorStopIs.push({
offset: 1,
color: xbColor
});
datapre = -1;
dataprevaule = value;
} else { //上一项位于分割线上
console.log((Math.abs(dataprevaule) / (Math.abs(dataprevaule) +
Math.abs(value))));
colorStopIs.push({
offset: (((index - 1) + (Math.abs(dataprevaule) / (Math.abs(dataprevaule) +
Math.abs(value)))) / (datas.length - 1)),
color: sbColor,
});
colorStopIs.push({
offset: (((index - 1 + datawc) + (Math.abs(dataprevaule) / (Math.abs(dataprevaule) +
Math.abs(value)))) / (datas.length - 1)),
color: xbColor,
});
colorStopIs.push({
offset: 1,
color: xbColor,
});
datapre = -1;
dataprevaule = value;
}
}
} else { //非最后一项
if (value > datazf) { //当前项在分割线之上
if (datapre == datazf || datapre > datazf) { //上一项位于分割线上
colorStopIs.push({
offset: index / (datas.length - 1),
color: sbColor,
});
datapre = 1;
dataprevaule = value;
} else { //上一项位于分割线下
colorStopIs.push({
offset: (((index - 1) + (Math.abs(dataprevaule) / (Math.abs(dataprevaule) +
Math.abs(value)))) / (datas.length - 1)),
color: xbColor,
});
colorStopIs.push({
offset: (((index - 1 + datawc) + (Math.abs(dataprevaule) / (Math.abs(dataprevaule) +
Math.abs(value)))) / (datas.length - 1)),
color: sbColor,
});
datapre = 1;
dataprevaule = value;
}
} else { //当前项在分割线之下
if (datapre == datazf || datapre < datazf) { //上一项位于分割线上
colorStopIs.push({
offset: index / (datas.length - 1),
color: xbColor,
});
datapre = -1;
dataprevaule = value;
} else { //上一项位于分割线下
colorStopIs.push({
offset: (((index - 1) + (Math.abs(dataprevaule) / (Math.abs(dataprevaule) +
Math.abs(value)))) / (datas.length - 1)),
color: sbColor,
});
colorStopIs.push({
offset: (((index - 1 + datawc) + (Math.abs(dataprevaule) / (Math.abs(dataprevaule) +
Math.abs(value)))) / (datas.length - 1)),
color: xbColor,
});
datapre = -1;
dataprevaule = value;
}
}
}
});
var colorStopsT = [];
if (mNum == -1) {
colorStopsT.push({
offset: 0,
color: xbColor, // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0, 0, 0, 0)', // 100% 处的颜色
})
}
if (mNum == 1) {
colorStopsT.push({
offset: 0,
color: 'rgba(0, 0, 0, 0)', // 0% 处的颜色
}, {
offset: 1,
color: sbColor, // 100% 处的颜色
})
}
if (mNum == 0) {
colorStopsT.push({
offset: 0,
color: xbColor, // 0% 处的颜色
}, {
offset: offset,
color: 'rgba(0, 0, 0, 0)', // 100% 处的颜色
}, {
offset: 1,
color: sbColor, // 100% 处的颜色
})
}
option = {
title: {
top: '10',
left: 'center',
text: '分割线上下异色',
textStyle: {
align: 'center',
color: '#FFFFFF',
fontSize: 18,
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
backgroundColor: '#ffffff',
tooltip: {},
xAxis: {
data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
},
yAxis: {},
series: [{
name: "温度值",
type: "line",
itemStyle: {
borderColor: "#fff"
},
areaStyle: {
color: "rgba(160,180,200,0)"
},
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: colorStopIs,
}
},
areaStyle: {
normal: {
color: {
type: 'linear', //设置线性渐变
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: colorStopsT,
globalCoord: false, // 缺省为 false
},
},
},
data: datas
}]
}
~~~
>#### 效果图
- html
- 头部标签
- canvas
- md
- DOM
- git常用命令
- css
- 网站
- 默认
- 前缀
- 文本
- 图片
- 选择器
- 滚动条
- 强制横屏
- 响应式
- 动画
- animation(动画)
- transition(过渡)
- transform(变形)
- translate(移动)
- 渐变
- 鼠标
- 自定义 Web 字体
- 可视化
- echarts
- 折线图
- 区域颜色标识
- 分段显示不同颜色
- 柱状图
- 子弹图
- 分组、柱体宽度、指示器宽度
- 圓角
- 顶部显示文字
- 双轴柱状折线图
- 双轴双列柱状图
- 单个柱状图
- 多纵向坐标
- 走势图
- 横向百分比
- 最大值和最小值
- 饼图
- 嵌套
- 分组显示
- 饼图结合柱状图
- 折线结合饼图
- 关系图
- 树图
- 地图
- 标点
- 选中
- 常用
- 图片超出可拖拽
- 百度导航
- 短信验证码倒计时
- video
- TS
- 未整理
- 消失的边界线问题
- 跟随
- js
- 兼容
- 数组去重
- 解析 URL 参数为对象
- 图片懒加载
- 正则
- Photoshop
- 快捷键
- 混合模式
- vscode
- vue
- 指令