echart折线图系列一:折线图基本配置
- 引入echart插件
- 页面上准备一个容器:<div id="box" style="height:400px;width: 800px;padding: 20px"></div>
- 获取id,初始化:var myChart = echarts.init(document.getElementById("box"));
- 定义基本配置信息
var option = {
// 标题
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(36, 49, 67, 0.9)', },
//图例名
legend: {
data:['']
},
grid: {
left: '3%', //图表距边框的距离
right: '4%',
bottom: '3%',
containLabel: true
},
//工具框,可以选择
toolbox: {
feature: {
saveAsImage: {}
}
},
//x轴信息样式
xAxis: {
type: 'category',
boundaryGap: false,
data: [''],
//坐标轴颜色
axisLine:{
lineStyle:{
color:'red'
}
},
//x轴文字旋转
axisLabel:{
rotate:30,
interval:0
},
}, yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 人'
}
}
],
series: [
//虚线
{
name:'',
type:'line',
symbolSize:4, //拐点圆的大小
color:['red'], //折线条的颜色
data:[],
smooth:false, //关键点,为true是不支持虚线的,实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
}
},
//实线
{
name:'',
type:'line',
symbol:'circle',
symbolSize:4,
itemStyle:{
normal:{
color:'red',
borderColor:'red' //拐点边框颜色
}
},
data:[]
}
]
};
echart折线图系列一:折线图基本配置的更多相关文章
- Qt数据可视化(散点图、折线图、柱状图、盒须图、饼状图、雷达图)开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...
- Android之自定义控件实现天气温度折线图和饼状图
以前写了个天气的APP,最近把他更新了一个版本,就抽取其中的天气温度折现图这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 效果如图: 代码: MainActivity.Java /**** * ...
- java 柱状图、折线图、饼状图
1.绘制柱状图: //BarChartTool工具类代码 package GUIview; import HibernateTool.HibernateTools; import ProductCla ...
- Spark入门实战系列--9.Spark图计算GraphX介绍及实例
[注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .GraphX介绍 1.1 GraphX应用背景 Spark GraphX是一个分布式图处理 ...
- Wijmo金融图表系列之等量图&成交量柱状图
Wijmo金融图表有很多类型,我们来一一介绍.之前介绍了平均K线图(Heikin-Ashi)和砖形图,现在我们来一起看看等量图和成交量柱状图. 图表 #3: 等量图(EquiVolume) 等量图和K ...
- openlayers4 入门开发系列之迁徙图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- vs2013\2015UML系列之-类图
1.UML简介Unified Modeling Language (UML)又称统一建模语言或标准建模语言. 简单说就是以图形方式表现模型,根据不同模型进行分类,在UML 2.0中有13种图,以下是他 ...
- 【UML九种图系列】之如何利用三层来绘制类图、时序图?
UML并发视图:实体之间行为的交互,是动态.分为:时序图.协作图.状态图.活动图 一.时序图简述: 时序图(Sequence Diagram):描述对象之间的交互行为,按照时间顺序排列. 元素: 角色 ...
- 数据结构与算法系列研究七——图、prim算法、dijkstra算法
图.prim算法.dijkstra算法 1. 图的定义 图(Graph)可以简单表示为G=<V, E>,其中V称为顶点(vertex)集合,E称为边(edge)集合.图论中的图(graph ...
随机推荐
- request param 获取
通过request对象获取客户端请求信息 getRequestURL方法返回客户端发出请求时的完整URL. getRequestURI方法返回请求行中的资源名部分. getQueryString 方法 ...
- 使用 gzexe 快速加密解密文件内容
使用 gzexe 快速加密解密文件内容 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用sshpass工具编写远程管理脚本 1>.安装依赖包 [root@node101 ...
- SpringBoot系列: JdbcTemplate 快速入门
对于一些小的项目, 我们没有必要使用MyBatis/JPA/Hibernate等重量级技术, 直接使用Spring JDBC 即可, Spring JDBC 是对 jdbc的简单封装, 很容易掌握. ...
- windows bat 脚本(一)切换当前目录
一.切换当前目录 现在桌面新建一个文件, 然后打开输入 cmd /k "cd /d D:\file" 如下图点击“另存为”,保存类型选择 “所有文件” 然后会在保存路径下发现 ...
- 《Java编程思想第四版完整中文高清版.pdf》-笔记
D.2.1 安插自己的测试代码 插入下述“显式”计时代码,对程序进行评测: long start = System.currentTimeMillis(); // 要计时的运算代码放在这儿 long ...
- [转]C语言的int最值问题,以及原码反码及补码
以2字节为例来说: 对于无符号的数值(原码反码及补码都一样),最大值为1111 1111 1111 1111=65535 最小值为0000 0000 0000 0000=0 对于有符号的来 ...
- 3D Slicer中文教程(四)—图像分割
1.数据获取 (1)下载3D Slicer自带的样本数据 (2)选择自由的数据 (3)网上数据库等其他方式下载数据 2.分割工具 Segment Editor是一个用于分割的模块.细分(也称为轮廓)描 ...
- ActiveMQ之topic主题模式
开发环境我们使用的是ActiveMQ 5.11.1 Release的Windows版,官网最新版是ActiveMQ 5.12.0 Release,大家可以自行下载,下载地址.需要注意的是,开发时候,要 ...
- 【easy】104. Maximum Depth of Binary Tree 求二叉树的最大深度
求二叉树的最大深度 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; ...
- nginx优化之keepalive
一.nginx之tcp_nopush.tcp_nodelay.sendfile 1.TCP_NODELAY你怎么可以强制 socket 在它的缓冲区里发送数据?一个解决方案是 TCP 堆栈的 TCP_ ...