echarts模拟highcharts实现折线图的虚实转换
多的不说直接上代码:
<html>
<html lang="en"><head>
<meta charset="utf-8">
<title>ECharts · Example</title>
<script src="./ECharts · Example_files/els.js"></script>
</head>
<body> <div id="min" style="height:400px"></div> <script type="text/javascript">
require.config({
paths: {
echarts: './ECharts · Example_files'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('min')); var option = {
title : {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [
{
name:'最高气温',
type:'line',
showAllSymbol:true,
symbol:'emptyCircle',
symbolSize:2,
smooth:true, //这个就是关键点了,为true是不支持虚线的,实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'solid' //'dotted'虚线 'solid'实线
}
}
},
data:[11, 11, 15, '-', '-', '-', '-']
},
{
name:'最高气温',
type:'line',
showAllSymbol:true,
symbol:'emptyCircle',
symbolSize:2,
smooth:false, //这个就是关键点了,为true是不支持虚线的,实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data:[ '-', '-', 15, 13, 12, 13, 10]
},
{
name:'最低气温',
type:'line',
showAllSymbol:true,
symbol:'emptyCircle',
symbolSize:2,
smooth:true, //这个就是关键点了,为true是不支持虚线的,实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'solid' //'dotted'虚线 'solid'实线
}
}
},
data:[1, -2, 2, 5, '-', '-', '-']
},
{
name:'最低气温',
type:'line',
showAllSymbol:true,
symbol:'emptyCircle',
symbolSize:2,
smooth:false, //这个就是关键点了,为true是不支持虚线的,实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data:[ '-', '-', '-', 5, 3, 2, 0]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
var ecConfig = require('echarts/config');
function eConsole(param) {
console.log(zoom); }
myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
}
);
</script> <!-- Le javascript
================================================== -->
<script src="./ECharts · Example_files/jquery.min.js"></script>
<script src="./ECharts · Example_files/bootstrap.min.js"></script> </body>
<script src="./ECharts · Example_files/echarts.js"></script>
</html> 效果图:
echarts模拟highcharts实现折线图的虚实转换的更多相关文章
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- HighCharts基本折线图
1.设计源码 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Projec ...
- 使用Highcharts生成折线图_at last
//数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $db ...
- 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...
- 使用Highcharts生成折线图与曲线图
折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...
- Highcharts之折线图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...
- echarts双y轴折线图柱状图混合实时更新图
先看下效果,自己用ps做了张gif图,发现很好玩啊..不喜勿喷 自己下载个echarts.min.js 直接上代码: <!DOCTYPE html><html><head ...
- highcharts 柱状图 折线图 混合 双纵轴显示
$(function () { $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: '' }, colors: ...
随机推荐
- ES之各种运算符,for、while、do while 、switch case循环
运算符优先级: 在所有的运算符中,括号的优先级最高,赋值符号的优先级最低. 小括号 > 计算运算符 > 比较运算符 > 逻辑运算符 > 赋值符号———————————————— ...
- getDate() 各种时间格式
Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect CONVERT(varchar(100), GETDATE() ...
- 合并百度影音的离线数据 with python 2.1 bdv格式的更新
最近百度影音的离线下载文件,格式有新变化. 经过分析,是bdv格式又有新格式,从最初的bdv0001,到bdv.config 的file....,这次更新的格式是直接包含一个片段,其中还有使用guid ...
- C++ class、struct区别
一.默认访问控制不同(最主要) struct默认为public,class默认为private.这个访问控制既是指成员的默认访问属性,又指继承时默认的继承属性. 二.定义template时不同 在模版 ...
- android手机web网站拨打电话几种方式
1. <input name="phone" format="*m" value="13"/> <do type=&quo ...
- 阿里云ECS安装sqlserver,本地无法连接问题排查思路
1. 阿里云控制台-对应的ECS实例的安全组是否添加了响应的端口(1433)可以访问: 2. 服务器-sqlserver服务是否开启: 3. 服务器-sqlserver配置器,对应的端口是否启用,已经 ...
- Python_高阶函数、装饰器(decorator)
一.变量: Python支持多种数据类型,在计算机内部,可以把任何数据都看成一个“对象”,而变量就是在程序中用来指向这些数据对象的,对变量赋值就是把数据和变量给关联起来. 对变量赋值x = y是把变量 ...
- confluence的安装
参考链接:https://www.ilanni.com/?p=11989 一.什么是confluence confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它可以实 ...
- mysql5.7 this is incompatible with sql_mode=only_full_group_by错误
解决办法: https://blog.csdn.net/qq_42175986/article/details/82384160 前言: 一.原理层面 这个错误发生在mysql 5.7 版本及以上版本 ...
- ''tensorflow.python.framework.errors_impl.ResourceExhaustedError: OOM when allocating tensor with shape[?]'' 错误分析
这是tensorflow 一个经常性错误,错误的原因在于:显卡内存不够. 解决方法就是降低显卡的使用内存,途径有以下几种措施: 1 减少Batch 的大小 2 分析错误的位置,在哪一层出现显卡不够,比 ...