Echars折线配置详解
Echars折线配置详解
比如做成如下效果图:
所有的配置如下:
var option = {tooltip: { // 提示框trigger: 'axis', // 触发类型(坐标轴触发)alwaysShowContent: false, // 是否永远显示提示框的内容backgroundColor: 'rgba(32, 174, 252, 0.7)', // 提示框的背景颜色textStyle: { // 提示框浮层的文本样式}},calculable: true,// x轴设置xAxis: [{type: 'category',name: '(月)', // x轴名称单位nameLocation: 'end', // 名称的位置nameTextStyle: { // 名称的样式color: '#999',fontSize: '12px'},nameGap: 0, // 名称与X轴的距离boundaryGap: true, // 坐标的刻度是否在中间min: '3', // 坐标轴刻度的最小值max: '12', // 坐标轴刻度的最大值axisLine: { // 坐标轴线条相关设置(颜色等)lineStyle: {color: '#ccc'}},axisTick: { // 坐标轴刻度相关设置length: '0' // 长度设置为0},axisLabel: { // 坐标轴刻度标签margin: 7, // 刻度标签与轴线之间的距离textStyle: {color: '#999', // 坐标轴刻度文字的颜色fontSize: '12px' // 坐标轴刻度文字的大小},// rotate: 30 // 旋转30度},data: ['3', '4', '5', '7', '8', '12'],// show: false}], // y轴设置yAxis: [ {type: 'value', // 类型数值轴name: '(人)', // Y轴名称单位nameTextStyle: { // 名称的样式color: '#999',fontSize: '12px'},nameGap: 13, // 名称与Y轴的距离axisTick: { // 坐标轴相关设置length: '0'},axisLine: { // 坐标轴线条相关设置(颜色等)lineStyle: {color: '#ccc'}},axisLabel: { // 坐标轴标签相关设置,距离颜色等margin: 7, // 刻度标签与轴线之间的距离// formatter: '{value} C', // 标签内容内置的格式转化器在后面加一个单位值textStyle: {color: '#999', // 坐标轴刻度文字的颜色fontSize: '12px' // 坐标轴刻度文字的大小}},splitLine: { // 坐标轴分割线。默认数值轴显示,类目轴不显示show: false}}],grid: { // 直角坐标系内绘图网格left: 36 },series: [ // 系列列表{name: '人', // 系列名称,用于tooltip的显示type: 'line',data: [2, 2, 2, 2, 2, 7, 2],itemStyle: { // 折线拐点的样式normal: {color: '#20aefc' // 拐线拐点的颜色}},lineStyle: { // 线条的样式normal: {color: '#20aefc', // 折线的颜色}},smooth: 0.3, // 是否平滑处理,如果是Number类型(取值范围为0到1),表示平滑程度,越小越接近折线段,反之areaStyle: { // 区域填充的样式normal: {// 线性渐变color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#b1e3fe' // 0% 处的颜色}, {offset: 1, color: '#fff' // 100% 处的颜色}], false)}},markPoint: { // 图标标注data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},{name: '人', // 系列名称,用于tooltip的显示type: 'line',data: [6, 6, 6, 6, 6, 6, 6],itemStyle: { // 折线拐点的样式normal: {color: '#20aefc' // 拐线拐点的颜色}},// smooth: 0.3, // 是否平滑处理,如果是Number类型(取值范围为0到1),表示平滑程度,越小越接近折线段,反之lineStyle: { // 线条的样式normal: {color: '#20aefc', // 折线的颜色}},areaStyle: { // 区域填充的样式normal: {// 线性渐变color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#b1e3fe' // 0% 处的颜色}, {offset: 1, color: '#fff' // 100% 处的颜色}], false)}},markPoint: { // 图标标注data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},{name: '人', // 系列名称,用于tooltip的显示type: 'line',data: [10, 10, 10, 10, 10, 10, 10],itemStyle: { // 折线拐点的样式normal: {color: '#20aefc' // 拐线拐点的颜色}},lineStyle: { // 线条的样式normal: {color: '#20aefc', // 折线的颜色}},areaStyle: { // 区域填充的样式normal: {// 线性渐变color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#b1e3fe' // 0% 处的颜色}, {offset: 1, color: '#fff' // 100% 处的颜色}], false)}},markPoint: { // 图标标注data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}}]
};
HTML代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="./echarts4.x.js"></script><script type="text/javascript" src="./zhexian.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 400px;height:400px;margin: 0 auto"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
转载自:https://www.cnblogs.com/tugenhua0707/p/9380352.html
Echars折线配置详解相关推荐
- elasticsearch-.yml(中文配置详解)
此elasticsearch-.yml配置文件,是在$ES_HOME/config/下 elasticsearch-.yml(中文配置详解) # ======================== El ...
- (ASA) Cisco Web ××× 配置详解 [三部曲之一]
(ASA) Cisco Web ××× 配置详解 [三部曲之一] 注意:本文仅对Web×××特性和配置作介绍,不包含SSL ×××配置,SSL ×××配置将在本版的后续文章中进行介绍. 首先,先来 ...
- mybatis 同名方法_MyBatis(四):xml配置详解
目录 1.我们将 数据库的配置语句写在 db.properties 文件中 2.在 mybatis-configuration.xml 中加载db.properties文件并读取 通过源码我们可以分析 ...
- logback节点配置详解
logback节点配置详解 一:根节点 <configuration></configuration> 属性 : debug : 默认为false ,设置为true时,将打印出 ...
- PM配置详解之一:企业结构
1.维护计划工厂 功能说明 在公司结构中定义维护工厂(通常已经作为后勤工厂存在)和维护计划工厂(简称计划工厂). 维护工厂:设备所安装的位置,如某机组安装在合营公司,那么合营公司就是此机组的维护工厂, ...
- 转 Log4j.properties配置详解
一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...
- Iptables防火墙配置详解
iptables防火墙配置详解 iptables简介 iptables是基于内核的防火墙,功能非常强大,iptables内置了filter,nat和mangle三张表. (1)filter表负责过滤数 ...
- spring之旅第四篇-注解配置详解
spring之旅第四篇-注解配置详解 一.引言 最近因为找工作,导致很长时间没有更新,找工作的时候你会明白浪费的时间后面都是要还的,现在的每一点努力,将来也会给你回报的,但行好事,莫问前程!努力总不会 ...
- php-fpm 启动参数及重要配置详解
2019独角兽企业重金招聘Python工程师标准>>> php-fpm 启动参数及重要配置详解 约定几个目录 /usr/local/php/sbin/php-fpm /usr/loc ...
最新文章
- 搭建远程linux,如何在远程Linux服务器上搭建Nginx?
- easyUI与选择WebUI
- php单例模式实现对象只被创建一次 mysql单例操作类
- 比特币现金扬声器系列II将领先的比特币一起带来
- 北京全年天气状况分析
- codevs1219 骑士遍历(棋盘DP)
- 表驱动法——直接访问表示例1
- Shiro系列-Shiro的怎么进行授权操作
- c语言编fft算法程序,用C语言实现FFT算法
- freeswitch SIP信令的接收
- 图像有损压缩与无损压缩_有损压缩与无损压缩之间的区别
- L1-009 N个数求和 (20 分)(C语言)(测试点3和测试点5)
- 国际禁毒日 | 和TcaplusDB一起向毒品say NO!
- 数据结构分析:红黑树、B+树
- 【计算机网络】笔记及考点
- java json去掉中括号,去掉json中的中括号
- 【网络安全】域名生成算法(DGA)基础总结
- 关于跨网闸数据同步的方式调研Java实现ModbusTCP通信
- 如何在IIS中配置https
- android 仿简书评论,Android仿简书搜索框效果的示例代码
热门文章
- Windows之node.js安装
- 生物计算机的主要原材料是(),新材料为生物计算机打造“神经元”和“突触”...
- mac11.14 mysql_mysql 5.7 11 章 数据类型(1)
- vue 调用webservice_js跨域调用WebService的简单实例
- ecs php mysql集成环境_在阿里云 CentOS 服务器(ECS)上搭建 nginx + mysql + php-fpm 环境...
- Redis 实用技术——Pipeline
- Git 初学札记(十)—— Reset 回退的三种状态解析
- 人工智能只能用python吗_为什么人工智能用Python?
- 手机屏幕什么计算机,windows 7系统中要实现智能手机无线投屏到计算机屏幕上可以借助的软件有哪些?...
- 2018.9.19.Matlab实验四:Matlab程序设计