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 ...
随机推荐
- python网络编程学习笔记(三):socket网络服务器(转载)
1.TCP连接的建立方法 客户端在建立一个TCP连接时一般需要两步,而服务器的这个过程需要四步,具体见下面的比较. 步骤 TCP客户端 TCP服务器 第一步 建立socket对象 建立socket对 ...
- mysql 中基础英语单词 (一)关于数据库创建与查找 (包括简写单词)
create 创建 limit 限制 count 计算 rollup 几上归纳 drop 降下,撤销 ...
- Thinkphp 3.2.2 验证码check_verify方法,只能验证一次
问题: Thinkphp 3.2.2 验证码check_verify方法,只能验证一次. function check_verify($code, $id = ''){ $verify = \Thin ...
- Linux下安装tensorflow
- 3. K线基础知识三
1. 阴线 证券市场上指开盘价高于收盘价的K线,K线图上一般用淡蓝色标注,表示股价下跌,当收盘价低于开盘价,也就是股价走势呈下降趋势时,我们称这种形态的K线为阴线. 中间部分实体为蓝色,此时,上影线的 ...
- $q -- AngularJS中的服务(理解)
描述 译者注: 看到了一篇非常好的文章,如果你有兴趣,可以查看: Promises与Javascript异步编程 , 里面对Promises规范和使用情景,好处讲的非常好透彻,个人觉得简单易懂. ...
- mysql的enum和set数据类型
定义一个ENUM或者SET类型,可以约束存入的数值. ENUM中的值必须是定义过数值列中的一个,比如ENUM('a','b','c'),存入的只能是'a'或者'b'或者'c',如果存入'','d'或者 ...
- 提交本地项目到github
要托管到github,那你就应该要有一个属于你自己的github帐号,所以你应该先到github.com注册 打开浏览器 在地址栏输入地址:github.com 填写用户名.邮箱.密码 点击Sign ...
- 用border-image实现波浪边框
border-image的介绍 http://www.w3school.com.cn/cssref/pr_border-image.asp 先看一个效果: http://www.w3school.co ...
- iOS coredata 数据库的加密(待研究)
https://github.com/project-imas/encrypted-core-data 使用起来很方便,底层还是使用了SQLCipher,有时间要研究一下! 数据库的密码不能用固定字符 ...