Question

echarts折线图markline-如何用Echarts制作标准折线图

Answer 1

echarts折线图markline数值怎么设置不想用默认的average

ECharts开源来自百度商业前端数据可视化团队,基于html5Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。ECharts(EnterpriseCharts商业产品图表库)提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。

如何用Echarts制作标准折线图

我们经常使用Echarts制作各种图表,那么如何运用Echarts制作标准折线图呢?下面我给大家演示一下。

01

首先打开SublimeText软件,新建一个HTML文档,并在文档中添加如下图所示的HTML结构

02

接下来运用scripts标签在HTML中引入echarts的库文件,如下图所示

03

然后我们在body标签中创建一个div区域用来存放折线图,如下图所示,注意给div设置高度

04

接下来我们通过echarts的init方法对刚才创建的div区域进行初始化,如下图所示

05

然后我们设置折线图的参数,包括X,Y坐标轴数据,折线图标题等信息,如下图所示

06

接下来在series参数中设置折线图所需要的数据,如下图所示,一条折线配置一个大括号

07

参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域,如下图所示

08

最后我们运行HTML文件,就可以看到如下图所示的标准折线图了,点击顶部的折线标题可以隐藏或者显示折线

2020-06-30Echarts折线图显示最大值最小值

最值markPoint:{

data:[

{type:'max',name:'最大值'},

{type:'min',name:'最小值'}

]

},

最值虚线markLine:{

data:[

{type:'average',name:'

平均值

'},

{type:'max',name:'最大值'},

]

}

动态添加

logo设计

创造品牌价值

¥500元起

APP开发

量身定制，源码交付

¥2000元起

商标注册

一个好品牌从商标开始

¥1480元起

公司注册

注册公司全程代办

¥0元起

查

看

更

多

• 官方电话
• 官方服务
  • 官方网站
  • 八戒财税
  • 知识产权
  • 八戒服务商
  • 企业需求
  • 数字市场