ECharts可视化基础——折线图

最新推荐文章于 2023-06-07 16:05:41 发布

重工黑大帅

最新推荐文章于 2023-06-07 16:05:41 发布

阅读量691

点赞数

分类专栏：数据可视化文章标签：可视化数据可视化

本文链接：https://blog.csdn.net/wmoxie/article/details/115460464

版权

数据可视化专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ECharts可视化基础——折线图

Echarts可视化基础1
Echarts可视化基础3
Echarts可视化基础4

1．折线图的绘制

根据折线图，做折线图的个性化展示。其中标记区域设置标记二个区域，1-3月和7-8月，线型为平滑曲线，绿色点线，填充曲线与x轴间区域为粉色。将图形与y轴间的空白边缘取消；对Y轴进行必要的缩放，使图形Y轴起始点不为0。分析此折线图所展示的数据趋势。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: '康师傅方便面销量如下：'
            },
            tooltip: {
                triggerOn: "mousemove",
                alwaysShowContent: true,
                position: function(pt) {
                  return [pt[0], 130];
                },
                trigger: "axis",
                show: true
            },
			toolbox: {
			    show: true,
			    feature: {
			      dataZoom: {
			        yAxisIndex: "none"
			      },
			      dataView: {
			        readOnly: false
			      },
			      magicType: {
			        type: ["line", "bar"]
			      },
			      restore: {},
			      saveAsImage: {}
			    }
			},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",],
				boundaryGap:false
            },
            yAxis: {},
            series: [{
				color:'red',
                name: '销量',
                type: 'line',
                data: [3000,2800,900,1000,800,700,1400,1300,900,1000,800,600],
				markPoint:{
					data:[
						{
							type:'max',name:'最大值'
						},
						{
							type:'min',name:'最小值'
						}
					]
				},
				markLine:{
					data:[
						{
							type:'average',name:'平均值'
						}
					]
				},
				markArea:{
				    itemStyle:{
				        color:'rgba(255, 173, 177, 0.4)'
				    },
				    data:[[{
				        name:'年初',
				        xAxis:'1月'
				    },{
				        xAxis:'2月'
				    }],[{
				        name:'年末',
				        xAxis:'11月'
				    },{
				        xAxis:'12月'
				    }]]
				},
				stack:'all',
				smooth:true,
				lineStyle:{
					color:'green',
					type:'dotted'   //solid实线 dotted点线  dashed长划线
				},
				areaStyle:{
					color:'pink'
				},
            },
			]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

2．堆叠图的绘制

根据第一次实验第五部分的内容，将‘汤达人’1-12月份的销售数据（[2000,3800,1900,500,900,1700,2400,300,1900,1500,1800, 200]）也显示在该图表上，用堆叠图的效果展示总的销售量。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: '康师傅方便面销量如下：'
            },
            tooltip: {
                triggerOn: "mousemove",
                alwaysShowContent: true,
                position: function(pt) {
                  return [pt[0], 130];
                },
                trigger: "axis",
                show: true
            },
			toolbox: {
			    show: true,
			    feature: {
			      dataZoom: {
			        yAxisIndex: "none"
			      },
			      dataView: {
			        readOnly: false
			      },
			      magicType: {
			        type: ["line", "bar"]
			      },
			      restore: {},
			      saveAsImage: {}
			    }
			},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",],
				boundaryGap:false
            },
            yAxis: {},
            series: [{
				color:'red',
                name: '销量',
                type: 'line',
                data: [3000,2800,900,1000,800,700,1400,1300,900,1000,800,600],
				markPoint:{
					data:[
						{
							type:'max',name:'最大值'
						},
						{
							type:'min',name:'最小值'
						}
					]
				},
				markLine:{
					data:[
						{
							type:'average',name:'平均值'
						}
					]
				},

				stack:'all',
				smooth:true,
				lineStyle:{
					color:'green',
					type:'dotted'   //solid实线 dotted点线  dashed长划线
				},
				areaStyle:{
					color:'pink'
				},
            },
			{
				color:'red',
				name: '销量',
				type: 'line',
				data: [2000,300,3000,1000,500,1500,200,300,1900,1200,1800,2600],
				stack:'all',
				smooth:true,
				lineStyle:{
					color:'blue',
					type:'solid'   //solid实线 dotted点线  dashed长划线
				},
				areaStyle:{
					color:'purple'
				},
			}
			]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

重工黑大帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts可视化基础——折线图

ECharts可视化基础21．折线图的绘制根据折线图，做折线图的个性化展示。其中标记区域设置标记二个区域，1-3月和7-8月，线型为平滑曲线，绿色点线，填充曲线与x轴间区域为粉色。将图形与y轴间的空白边缘取消；对Y轴进行必要的缩放，使图形Y轴起始点不为0。分析此折线图所展示的数据趋势。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</
复制链接

扫一扫

专栏目录