echarts中显示效果option中必有的属性
写一个最简单的效果让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中必有的属性的更多相关文章
- jsp在select中的option中编写if标签
<select onchange="lxx(this)"> <option value="">全部</option> < ...
- 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 ...
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- Java中如何获取spring中配置文件.properties中属性值
通过spring配置properties文件 1 2 3 4 5 6 7 8 9 <bean id="propertyConfigurer" class="co ...
- javascript中元素的scrollLeft和scrollTop属性说明
再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...
- jquery动态刷新select的值,后台传过来List<T>,前台解析后填充到select的option中
jquery动态刷新select的值:将后台传来的List<T>赋值到select下的option. 第一个select选择后出发该方法refreshMerchant(params),传递 ...
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- C#winform中使用控件的Dock属性进行布局
想要实现如下布局,可以通过设置控件的Dock属性达到效果 1.拖放一个panel控件一个label控件(放在panel中)和一个treeView控件到TestForm中 2.设置panel的Dock属 ...
- 删除select中所有option选项jquery代码
select中所有option选项如何删除,本文使用jquery简单实现下,有此需求的朋友可以参考下,希望对大家有所帮助. 这样写 复制代码代码如下: <select id="sear ...
随机推荐
- ASP.MVC时间类型json数据处理
服务端返回DateTime属性如果用自带的json方法返回的数据如下: 有2种办法解决一种是采用服务端解决方案,一种是使用前端解决方案 1.前端解决方案 第一步:对Date进行扩展 // 对Date的 ...
- Active Record 数据迁移
1.创建controler: welcome ;action: index $ rails generate controller welcome index 2.创建名为Article的model定 ...
- Hash算法专题
1.[HDU 3068]最长回文 题意:求一个字符串(len<=110000)的最长回文串 解题思路:一般解法是manacher,但是这一题用hash也是可以ac的 假设当前判断的是以i为中心偶 ...
- 通过akRegionCode找到对应的程序
在Oracle EBS中,有一些程序是从上一个版本的Web开发框架(AK)转成OAF的,而这部分程序定义的功能与一般的OAF页面不同,OAF页面使用 OA.jsp?page=/oracle/apps/ ...
- PHP中::、->、self、$this操作符的区别
在访问PHP类中的成员变量或方法时,如果被引用的变量或者方法被声明成const(定义常量)或者static(声明静态),那么就必须使用操作符::,反之如果被引用的变量或者方法没有被声明成const或者 ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- C++11智能指针读书笔记;
智能指针是一个类对象,而非一个指针对象. 原始指针:通过new建立的*指针 智能指针:通过智能指针关键字(unique_ptr, shared_ptr ,weak_ptr)建立的指针 它的一种通用实现 ...
- C++内存管理
1. 栈(Stack): 位于函数内的局部变量(包括函数实参),由编译器负责分配释放,函数结束,栈变量失效.2. 堆(Heap): 由new申请的内存,由delete负责 ...
- Atom安装以及activate-power-mode atom package插件安装
1.首先安装node.js,不然没有npm命令可用. 现在很多开源程序都使用npm来管理依赖包,所以node.js必备呀. 2.去下载atom安装包和activate-power-mode-0.5.2 ...
- The note of Vue.js
In computed field, increment operator is not supported.