echart折线区域图

在引入echart区域折线图时,没有出现对应的区域图

当发现引入下面代码到自己的代码中并没有对应的区域图


option = { 
xAxis: { 
type: ‘category‘, 
boundaryGap: false, 
data: mydata.xname(改成自己的数据) 
}, 
yAxis: { 
type: ‘value‘ 
}, 
series: [{ 
data: mydata.ydata,(改成自己的数据) 
type: ‘line‘, 
areaStyle: {} 
}] 
};[这里写链接内容](http://echarts.baidu.com/examples/editor.html?c=area-basic) 
这样获取的代码时间2018.4.20

经过查找api,发现echarts本身的好多代码自己引入了,加上自己的echarts可能被后台压缩过,导致该出现的没有出现

最终的解决办法就是改成了如下代码

option = {
    xAxis: {
        type: ‘category‘,
        boundaryGap: false,
        data: mydata.xname(改成自己的数据)
    },
    yAxis: {
        type: ‘value‘
    },
    series: [{
        data: mydata.ydata,(改成自己的数据)
        type: ‘line‘,
         itemStyle: {normal: {areaStyle: {type: ‘default‘}}}
    }]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

结果就是很正常的:

在这图表中还可以用: 
symbol:’none’, //这句就是去掉点的 
smooth:true, //true就是让曲线变平滑的

原文地址:https://www.cnblogs.com/snowhite/p/9528731.html

时间: 2024-10-29 21:00:49

echart折线区域图的相关文章

echart折线堆叠图 Y轴数据不堆叠

<!DOCTYPE html> <html> <head></head> <body>     <div class="row form-inline form-ranking">     <div class="form-group">         <label class="control-label">店铺:</label>   

数据可视化:Echart中k图实现动态阈值报警

1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下: 3 代码 1)头文件,引用jquery.js和echart.js;其中,jquery是实现ajax读取数据的,echart负责数据前端可视化. <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <scr

highcharts插件(HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。)

1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari.IE和火狐等等: HighCharts的几种基本的官方图表示例(6张) 2.图表类型:HighCharts支持图表类型,包括曲线图.区域图.柱状图.饼状图.散状点图和综合图表等等,可以满足各种需求. 3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用. 4.提示功能:HighCharts生成的图表中

Android实现天气预报温度/气温折线趋势图

 Android实现天气预报温度/气温折线趋势图 天气预报的APP应用中,难免会遇到绘制天气温度/气温,等关于数据趋势的折线或者曲线图,这类关于气温/温度的折线图,一般会有两条线,一条是高温线,一条是低温线. 我之前介绍了一个Android平台上第三方开源框架的统计图表库MPAndroidChart(文章链接地址:http://blog.csdn.net/zhangphil/article/details/47656521 ),具体使用方法详情请看这篇文章. 现在基于Android平台上的M

Highcharts 丢失值区域图;Highcharts 反转x轴与y轴;Highcharts 曲线区域图;Highcharts 区间区域图;Highcharts 使用区间和线的区域图

Highcharts 丢失值区域图 chart 配置 将 chart 的 spacingBottom 属性设置为 30.表示图表间的间隔区间. var chart = { type: 'area', spacingBottom: 30 }; 实例 文件名:highcharts_area_missing.htm <html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示: 后来查资料,发现这个标签的文字是可以自定义的,定义方式如下: 1 formatter: function(text){ 2 var strlength = text.length; 3 if(strlength % 2 == 1){ 4 text = text.replace(/\S

echart折线图小知识

1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 1 var selected = {}; 2 selected['联盟广告'] = false; 3 option.legend.selected = selected; 4 在series中依然有它相关的数据 1 series : [ 2 { 3 name:'邮件营销', 4 type:'line', 5 stack: '总量', 6 data:[1

echart 折线图、柱状图、饼图、环形图颜色修改

之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy xAxis: { type: 'category', boundaryGap: false, data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上'] }, yAxis: { type: 'value' }, series: [ { name:'员工

highcharts api 中文网 折线图、曲线图、区域图、3D图、柱状图示例以及使用

highcharts api  中文网 地址:http://www.hcharts.cn/demo/index.php?p=10&theme=skies 代码示例 $(function () { $('#container').highcharts({ title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xA