1. 使用echarts标记线(工字型)
1.1 实现效果
1.2 使用属性
可查看详细参数echarts官网，markline属性 https://echarts.apache.org/zh/option.html#series-bar.markLine
1.3 代码实现
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = {
tooltip: {
trigger: 'axis', axisPointer: {
type: 'shadow' } }, xAxis: [ {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], } ], yAxis: [ {
type: 'value', } ], toolbox: {
feature: {
magicType: {
type: ['bar', 'line']
,
}
,
iconStyle
:
{
borderWidth
:
10
}
,
}
}
,
series
:
[
{
name
:
'Direct'
,
type
:
'bar'
,
barWidth
:
'60%'
,
data
:
[
10
,
52
,
200
,
334
,
390
,
330
,
220
]
,
// 关键代码
markLine
:
{
symbol
:
"line"
,
// 两头也是横线
symbolSize
:
18
,
// 长度18px
lineStyle
:
{
// 线的样式
type
:
"solid"
,
color
:
"#1DB163"
,
width
:
1
,
}
,
data
:
[
[
// 按照起点-终点连接成一条线
{
xAxis
:
'Tue'
,
yAxis
:
60
}
,
// 起点
{
xAxis
:
'Tue'
,
yAxis
:
80
}
,
// 终点
]
]
}
,
}
]
}
; option
&& myChart
.
setOption
(option
)
;
2. echarts图表数据为空时，设置纵坐标为0-1
2.1 实现效果
2.2 使用属性
详细参数可查看echarts官网，yAxis min max属性 https://echarts.apache.org/zh/option.html#yAxis.min
2.3 代码实现
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: [
{
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}
],
yAxis: [
{
type: 'value',
// 关键代码
// 设置最小值为0 最大值为1 即可实现无数据时 纵坐标仍有刻度
min: 0,
max: 1,
}
],
toolbox: {
feature: {
magicType: {
type: ['bar', 'line'],
},
iconStyle: {
borderWidth: 10
},
}
},
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: [],
}
]
};
option && myChart.setOption(option);
3. tooltip 数据展示
3.1 实现效果
3.2 使用属性
详细参数可查看echarts官网，tooltip属性 https://echarts.apache.org/zh/option.html#grid.tooltip.formatter
3.3 代码实现
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
let xAxisData = [];
let data1 = [];
let data2 = [];
let data3 = [];
let data4 = [];
for (let i = 0; i < 10; i++) {
xAxisData.push('Class' + i);
data1.push(+(Math.random() * 2).toFixed(2));
data2.push(+(Math.random() * 5).toFixed(2));
data3.push(+(Math.random() + 0.3).toFixed(2));
data4.push(+Math.random().toFixed(2));
}
var emphasisStyle = {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,0.3)'
}
};
option = {
legend: {
data: ['bar', 'bar2', 'bar3', 'bar4'],
left: '10%'
},
toolbox: {
feature: {
magicType: {
type: ['stack']
},
dataView: {
}
}
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' 或'shadow'
},
formatter: (params) => {
let docStyle = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:`;
let result = `<div style="color: #20253B;font-size: 12px; line-height: 30px;">${
params[0].name}<br/>`;
params.forEach((data, index) => {
let docColor = docStyle + data.color + '"></span>';
result += ` ${
docColor} ${
data.seriesName} <span style="margin-left: 20px; float: right; ">￥${
data.data }</span> ${
index === params.length - 1 ? "" : "<br/>"}`;
})
result += "</div>";
return result;
}
},
xAxis: {
data: xAxisData,
name: 'X Axis',
axisLine: {
show: false },
},
yAxis: {
minInterval: 1
},
color: ["#4875f6","#1db163","#ffb51b","#ff7979"],
series: [
{
name: 'bar4',
type: 'bar',
stack: 'one',
data: data4,
z: 99
},
{
name: 'bar',
type: 'bar',
stack: 'one',
data: data3,
z: 10,
},
{
name: 'bar2',
type: 'bar',
stack: 'one',
data: data2,
z: 11,
},
{
name: 'bar3',
type: 'bar',
stack: 'one',
data: data1,
z: 12
},
]
};
option && myChart.setOption(option);
4. 工具栏 toolBox 图标配置
4.1 实现效果
4.2 使用属性
详细参数可查看echarts官网，toolbox属性 参见https://echarts.apache.org/zh/option.html#toolbox
4.3 代码实现
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
toolbox: {
feature: {
magicType: {
type: ["bar", "line"],
icon: {
bar: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHKSURBVEiJ7dVNSFRRGAbg9zv3iMxiDPc3RDgzd65FdCchRIjZtBlw0UJiFm6SWhSBQS1bBW5cFCiYEgTqLGaTtGqpILaJcfIvuc1VXPiDm8qgdNQ5XxtnYYTd+ekqMe/y8PI952y+Q2PpTJKAEQAmAowkYARC3+5Jpd4HhY6nMywAmEGipYigwTpch4/TbViW0x44rC55lhb02s+giO0MR2znaU1gsCaAyQd6A0CSgV4Vi3dVD/tIIpGQAAYJ1AfStwj8KnI5bv9zeHPn2yMQtj+vzE16n+ZzTHgMzW+Uut5UQ7jbUG3OHdPsCAGAUldMgJ6wEA9KDW8lN85MM2g4GK0VTBHbGyXGs1C4MNtqOy0kjefMGPKWsqsnmoffHwrihdOGSb+qanMGwLBDDcXoz0N5VwJZEL4c7V3o+b3reV4BQH/VsLKdXmLcLMijRH5h8QeAF5Z19UNRGHvr69P7fi9fNmxovJPyYDK/uPy1dOa6H2crAcuCXTe3VQ3yp5zZrvbz4uZoLH6vkuFFLuZX3fmpsmG9LzeMRv2Whb5WCWxoEQZQPry2lt0FcL8S9G85r/9xHf5P4I2JiUxn0DCNpTNJAC8JuBgk/At+6Y366X1qFAAAAABJRU5ErkJggg==`,
line: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFDSURBVEiJ7Zc/S8NAGIefNy2og4MfwE2SQhFpFTrU0cGlQwbpYF1V/FKCVqUu4uYgODmKdHDwX5b2C7i55F4Hm8Vqckk1Usiz5F5yued+vMdB5Pikp+TLUGGvDLCz3Za8rN1ur6nCmZOXMKLTad8KLOYujijEuVH+rYXcam3FGDYBHIerp4f7ftz8hMRbJc+rrVmZVXyEFkILFT9pemzipeqLZ4wcAss2bge5ttokSYnVCOifXC6Ze/y1p6S8eLMfLhUf0Y3ReC7t59bi7xKm6Wlm8aQJs4uZLOH4Wv/EdIhVtamqTds6Dvsei16IMhuNPx/x9aTiBbdS3yUEIAAgpDF692PtVuqNUMPn18f+TWqxeS8PSzPmUh2zarHBMUrGmQfSi4Pg7g04yCJNYjpOdSEuxDYcnZ6vKwwk7582hQGw/wEISHSC/xE5IAAAAABJRU5ErkJggg==`,
},
},
},
showTitle: false,
right: 100,
itemSize: 30,
itemGap: -1,
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};