Zhou Xingxing 9527 2022-01-26 16:31:36 阅读数:651
Look at the effect ：
To configure ：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['default','Step End', 'Step Middle', 'Step Start','Smooth']
},
series: [
{
name: 'default',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
name: 'Step End',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
step: 'end',
},
{
name: 'Step Middle',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
step: 'middle',
},
{
name: 'Step Start',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
step: 'start',
},
{
name: 'Smooth',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
smooth: true
}
]
};
Complete code ：
<!-- THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-simple --> <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> <!-- Uncomment this line if you want to dataTool extension <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script> --> <!-- Uncomment this line if you want to use gl extension <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js"></script> --> <!-- Uncomment this line if you want to echarts-stat extension <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ecStat.min.js"></script> --> <!-- Uncomment this line if you want to use map <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/world.js"></script> --> <!-- Uncomment these two lines if you want to use bmap extension <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]{{version}}/dist/extension/bmap.min.js"></script> --> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, tooltip: { trigger: 'axis' }, legend: { data: ['default','Step End', 'Step Middle', 'Step Start','Smooth'] }, series: [ { name: 'default', data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { name: 'Step End', data: [150, 230, 224, 218, 135, 147, 260], type: 'line', step: 'end', }, { name: 'Step Middle', data: [150, 230, 224, 218, 135, 147, 260], type: 'line', step: 'middle', }, { name: 'Step Start', data: [150, 230, 224, 218, 135, 147, 260], type: 'line', step: 'start', }, { name: 'Smooth', data: [150, 230, 224, 218, 135, 147, 260], type: 'line', smooth: true } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } </script> </body> </html>
copyright：author[Zhou Xingxing 9527]，Please bring the original link to reprint, thank you. https://en.javamana.com/2022/01/202201261631354371.html