ECharts从零开始（二）—— Line

最新推荐文章于 2024-03-29 04:22:37 发布

Artoria____

最新推荐文章于 2024-03-29 04:22:37 发布

阅读量2.9k

点赞数 1

分类专栏：数据可视化 # ECharts

本文链接：https://blog.csdn.net/Artoria_QZH/article/details/100543477

版权

数据可视化同时被 2 个专栏收录

20 篇文章 36 订阅

订阅专栏

ECharts

8 篇文章 0 订阅

订阅专栏

上篇博文介绍了如何简单地将官网中的实例绘制出来，这一篇来对实例中的Line进行一些简单地美化修改。

首先要知道一些名词，就一个简单地官网实例来说：
在这里插入图片描述
title、legend、toolbox如上图所示，其他的包括主体数据基本都是在series里面修改美化。
这个实例的option代码如下：

option = {
    title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
};

现在我们来正式开始修改工作。

toolbox：

toolbox内有以下参数：
在这里插入图片描述
其中可以通过改变show是true或false来确定是否显示toolbox。
feature是toolbox的各工具配置项：

saveAsImage是保存为图片
restore是配置项还原
dataView是数据视图工具，在readOnly设置为false后，可以在HTML上任意修改数据，具体还有以下功能：
dataZoom是数据区域缩放，目前只支持直角坐标系的缩放。还可以修改以下参数：
magicType是动态类型切换。具体可以切换line、bar、stack和tiled。参数如下：

上述左右均可通过修改show为true或false来开启或关闭

xAxis&yAxis

xAxis为x轴，yAxis为y轴。同样可以通过show开启和关闭。
在这里插入图片描述

type
type是坐标轴的种类，具体有：
（1）value：数值轴，适用于连续数据
（2）category：类目轴，适用于离散数据。为该类型时必须通过 data 设置类目数据。
（3）time：时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
（4）log：对数轴，适用于对数数据。
nameLocation
nameLocation是坐标轴名称显示位置，可选参数有start、middle或center以及end
nameTextStyle
nameTextStyle是坐标轴的字体样式，可以在里面改变字体的样式、宽细、大小、颜色等等等等。
例如：

nameTextStyle:{
	color:'red',
	fontStyle:'italic',
	fontSize:20
}

axisLine:
axisLine是坐标轴轴线的相关设置，可以在里面距离修改坐标轴的颜色、宽度等。
data
data是传入的类目数据。如果没有设置 type，但是设置了 axis.data，则认为 type 是 ‘category’。
如果设置了 type 是 ‘category’，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 ‘category’ 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。
在data中，还可以突出为某一项或者某几项具体配置，例如：

data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

在这里，就突出显示了周一，将颜色改为了红色且字体大小加大。

还有其他非常非常非常非常多的组合可以慢慢的研究尝试，最后附上博主修改后的图以及代码（实际没有非常大的变化hhh）：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
			title: {
				text: '未来一周气温变化',
				subtext: '纯属虚构'
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data:['最高气温','最低气温']
			},
			toolbox: {
				show: true,
				feature: {
					dataZoom: {
						yAxisIndex: 'none'
					},
					dataView: {readOnly: false},
					magicType: {type: ['line', 'bar']},
					restore: {show:true},
					saveAsImage: {}
				}
			},
			xAxis:  {
				type: 'category',
				boundaryGap: false,
				nameGap:50,
				data: ['周一','周二',
				{
					value:'周三',
					textStyle:{
						fontStyle:'italic',
						fontWeight:'bold',
						fontSize:20,
						color:'blue'
					}
				},
				'周四','周五','周六','周日']
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					formatter: '{value} °C'
				}
			},
			series: [
				{
					name:'最高气温',
					type:'line',
					lineStyle:{
						type:'dashed'
					},
					symbol:'arrow',
					symbolsize:10,
					symbolRotate:-90,
					data:[11, 11, 
					{
						value:15,
						symbol:'emptydiamond',
						symbolsize:20,
					}, 
					13, 12, 13, 10,],
					markPoint: {
						data: [
							{type: 'max', name: '最大值'},
							{type: 'min', name: '最小值'}
						]
					},
					markLine: {
						data: [
							{type: 'average', name: '平均值'}
						]
					}
				},
				{
					name:'最低气温',
					type:'line',
					data:[1, -2, 2, 5, 3, 2, 0],
					smooth:true,
					markPoint: {
						data: [
							{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
						]
					},
					markLine: {
						data: [
							{type: 'average', name: '平均值'},
							[{
								symbol: 'none',
								x: '90%',
								yAxis: 'max'
							}, {
								symbol: 'circle',
								label: {
									normal: {
										position: 'start',
										formatter: '最大值'
									}
								},
								type: 'max',
								name: '最高点'
							}]
						]
					}
				}
			]
        })


        

    </script>
</body>
</html>

本文只提到了少数修改，其他的具体修改可参考官方文档。

Artoria____

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ECharts从零开始（二）—— Line

上篇博文介绍了如何简单地将官网中的实例绘制出来，这一篇来对实例中的Line进行一些简单地美化修改。首先要知道一些名词，就一个简单地官网实例来说：title、legend、toolbox如上图所示，其他的包括主体数据基本都是在series里面修改美化。这个实例的option代码如下：option = { title: { text: '未来一周气温变化', ...
复制链接

扫一扫