写一个最简单的效果让option中不可缺少的属性。

var option = {
xAxis:[ //x轴,数组对象,其下至少有一个对象
{.....}
],
yAxis:[//y轴,数组对象,其下可以有空对象
{.....}
],
series :[//驱动图表生成的数据内容数组,其下至少有一个对象
{}
]
}

写一个小demo

var option ={
xAxis:[
{
name:'test',
type:'category',
position:'left',
show:true,
data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis:[
{
type : 'value',
position: 'left' }
],
series : [
{
name: '蒸发量',
type: 'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
}

效果图如下:

当没有xAxis时候

var option ={
//注意此时没有xAxis
yAxis:[
{
type : 'value',
position: 'left' }
],
series : [
{
name: '蒸发量',
type: 'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
}

效果图如下:

当没有yAxis时候或者yAxis数组下没对象时

当没有yAxis时

var option ={
xAxis:[
{
name:'test',
type:'category',
position:'left',
show:true,
data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
//注意此时没有yAxis
series : [
{
name: '蒸发量',
type: 'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
}

效果图如下:

当yAxis数组下没对象时

var option ={
xAxis:[
{
name:'test',
type:'category',
position:'left',
show:true,
data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis:[//注意此时yAxis数组下没对象时 ],
series : [
{
name: '蒸发量',
type: 'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
}

效果图如下

当没有series时

当没有series 时候是没有数据,可想而知肯定是不会出效果的,效果如下所示,同时也不会出现x轴和y轴,即只会出现空白。

echarts中显示效果option中必有的属性的更多相关文章

  1. jsp在select中的option中编写if标签

    <select onchange="lxx(this)"> <option value="">全部</option> < ...

  2. vue-learning:41 - Vuex - 第二篇:const store = new Vue.Store(option)中option选项、store实例对象的属性和方法

    vuex 第二篇:const store = new Vue.Store(option)中option选项.store实例对象的属性和方法 import Vuex from 'vuex' const ...

  3. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  4. Java中如何获取spring中配置文件.properties中属性值

    通过spring配置properties文件 1 2 3 4 5 6 7 8 9 <bean id="propertyConfigurer"   class="co ...

  5. javascript中元素的scrollLeft和scrollTop属性说明

    再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...

  6. jquery动态刷新select的值,后台传过来List<T>,前台解析后填充到select的option中

    jquery动态刷新select的值:将后台传来的List<T>赋值到select下的option. 第一个select选择后出发该方法refreshMerchant(params),传递 ...

  7. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

  8. C#winform中使用控件的Dock属性进行布局

    想要实现如下布局,可以通过设置控件的Dock属性达到效果 1.拖放一个panel控件一个label控件(放在panel中)和一个treeView控件到TestForm中 2.设置panel的Dock属 ...

  9. 删除select中所有option选项jquery代码

    select中所有option选项如何删除,本文使用jquery简单实现下,有此需求的朋友可以参考下,希望对大家有所帮助. 这样写 复制代码代码如下: <select id="sear ...

随机推荐

  1. C#

    1.类型推导 ; Console.WriteLine(age.GetType().ToString()); var 关键字还可以配合生成匿名类型,如: , Time = }: 如果有可以将对象转成JS ...

  2. 【ueditor】api方法

    //让其选中文本高亮 editor.selection.getRange().select(); //高亮后,才能获取到选中文本,当选中字失去焦点的情况下是获取不到的选中文本的 var text = ...

  3. codevs2216 行星序列

    题目描述 Description "神州"载人飞船的发射成功让小可可非常激动,他立志长大后要成为一名宇航员假期一始,他就报名参加了"小小宇航员夏令营",在这里小 ...

  4. 【Make a H5 game】JS for beginner——FROM U2B

    https://www.youtube.com/watch?v=F2Dc-JlwgN4&feature=iv&src_vid=WfL4LNUL3R0&annotation_id ...

  5. apache极简配置虚拟机

    在apache的httpd.conf文件最后添加: Listen 81<VirtualHost *:81> DocumentRoot E:/CM/wx_shop/ecshop</Vi ...

  6. Sicily 1153: 马的周游问题(DFS+剪枝)

    这道题没有找到一条回路,所以不能跟1152一样用数组储存后输出.我采用的方法是DFS加剪枝,直接DFS搜索会超时,优化的方法是在搜索是优先走出度小的路径,比如move1和move2都可以走,但是如走了 ...

  7. JAVA 各种数值类型最大值和最小值 Int, short, char, long, float,&nbs

    转载地址:http://blog.sina.com.cn/s/blog_5eab3d430101fdv6.html 代码片段: fmax = Float.MAX_VALUE; fmin = Float ...

  8. 阿里云部署nodejs服务器(windows)

    花了大半个月做的网站终于要上线了,周围的同学们很多都在使用阿里云的服务器,我也入手了一台.考虑到自己不是很适应ubuntu的命令行界面,于是买了个windows的,上网搜了一下,似乎都是用linux来 ...

  9. xamarin android webview XHR错误

    Cross origin requests are only supported for protocol schemes MLHttpRequest cannot load file:///F:/G ...

  10. c#延迟加载

    public class BlogUser { public int Id { get; private set; } public Lazy<List<Article>> A ...