|
阅读：1788回复：1
Echarts折线图基本实现、最大值、最小值、堆叠折线图等等Echarts折线图基本实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> </body> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { type:'category', data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: { type:'value' }, series: [{ name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </html> 最大值、最小值、平均值、标注区间显示 都是写在series中 series: [ { name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20], markPoint: { data:[ { type:'max' //最大值 }, { type:'min' //最小值 } ] }, markLine:{ data:[ { type:'average' //平均值 } ] }, markArea:{ //标注区间 x轴衬衫-到雪纺衫有阴影 data:[ [ { xAxis:'衬衫' }, { xAxis:'雪纺衫' } ] ] } } ] 
折线线条平滑效果、风格、填充效果 smooth:true, //线条平滑 风格 lineStyle:{ color:'green', type:'dashed' //dotted solid }, areaStyle:{ //填充风格 color:'red' } //填充 
紧挨边缘 xAxis:中设置 boundaryGap:false xAxis: { type:'category', data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], boundaryGap:false, //紧挨边缘 }, 脱离0值比例 **使用在数值离0都比较远并且数值都相差不多 在yAxis中加scale:true ** yAxis: { type:'value', scale:true //脱离0值比例 离0远值都相差不多 }, series: [ { name: '销量', type: 'line', data: [1000, 1005, 1100, 1050, 1200, 980], stack:'all', //堆叠图 areaStyle:{} } ] 堆叠折线图 在series中再创建一个对象,在对象中加stack:'all’是为了不让两条折线交叉,不然显得杂乱无章 series: [ { name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20], stack:'all', //堆叠图 areaStyle:{} //填充效果 有默认颜色 }, { name: '销量', type: 'line', data: [30, 50, 10, 6, 5, 30], stack:'all', areaStyle:{ color:'green' } } ] https://blog.csdn.net/liumuye88888/article/details/116720774 |
|
|
沙发#
发布于：2024-06-06 14:22
|
|
