echarts零基础快速入门
第一步:得到这个dom对象。然后进行各种操作。
var myChart = echarts.init(document.getElementById('item1'));
第二步:所有的配置项全部放在 var option = {}中。
第三步就是在option中添加各种参数。如下:
color:['yellow'],
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
格式是json格式的数据。改变颜色:直接加上color:["value"],
柱状图 每个柱的间距和宽度是根据画布的百分比自动填充的。下面我们来简单的控制柱子的宽度和间距,
在series的
series: [{
name: '销量',
type: 'bar',
barWidth:"20%",//它在控制柱子的宽度。
data: [5, 20, 36, 10, 10, 20]
}]
在titile中添加:(注意添加的格式。)
title: {
show:false,//标题不显示
link:"www.baidu.com",//添加标题的链接。。(很有用)
text: 'ECharts 入门示例'
},
textAlign:'center', 调整标题的位置。这个是根据标题的位置来的。然并卵,微调还行。 并不能想象中得可以让tiitle居中。想居中调整位置的话,目前用这种办法:
title: {
padding: [25, 850],
text: '作业量',
},
或者用这种方法:
title: {
left:'50%',
text: '作业量',
},
grid:网格。就是中间区域的网格。可以改变颜色。什么的。
xAxis: {
position:"top",
position:"bottom",
inverse:true,//反转柱的位置。
},
这样,就把表格底部的字体。弄到上面去。
yAxis:直角坐标系 grid 中的 y 轴,
interval:5 ,每个y轴的间隔是5个单位。
如果想做成网格状态,这句话是关键:
是否显示分隔线。默认数值轴显示,类目轴不显示。
处理方法是这样。如果想要网格。这样写:
xAxis : [
{
splitLine:{show: true},//加上网格线
type : 'category',
data: ["衬衫","羊毛衫","雪纺衫","","","","","","","","","",""],
splitArea : {show : true}//保留网格区域
}
],
yAxis : [
{
splitLine:{show: true},//加上网格线
type : 'value',
splitArea : {show : true}//保留网格区域
}
],
先学这么多。 就这样吧。。
echarts零基础快速入门的更多相关文章
- 序言 - PHP零基础快速入门
我为什么要写<PHP零基础快速入门>? 原因: PHP 真心简单,适合零基础的人快速入门掌握,身边的人学习一两周上手开发的比比皆是: 市面上的文章或书籍对初学者并不友好,多半枯燥乏味,我相 ...
- 零基础快速入门web学习路线(含视频教程)
下面小编专门为广大web学习爱好者汇总了一条完整的自学线路:零基础快速入门web学习路线(含视频教程)(绝对纯干货)适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利 ...
- 零基础快速入门SpringBoot2.0 (一)
零基础快速入门SpringBoot2.0 (一) 一.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 1.依赖版本jdk8以上, Spr ...
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第1节零基础快速入门SpringBoot2.0_1、SpringBoot2.x课程介绍和高手系列知识点
1 ======================1.零基础快速入门SpringBoot2.0 5节课 =========================== 1.SpringBoot2.x课程全套介绍 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具]
[易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具] 项目实战 实战5:实现BTC价格转换工具 今天我们来开发一个简单的BTC实时价格转换工具. 我们首先 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(27)|实战4:从零实现BTC区块链]
[易学易懂系列|rustlang语言|零基础|快速入门|(27)|实战4:从零实现BTC区块链] 项目实战 实战4:从零实现BTC区块链 我们今天来开发我们的BTC区块链系统. 简单来说,从数据结构的 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(26)|实战3:Http服务器(多线程版本)]
[易学易懂系列|rustlang语言|零基础|快速入门|(26)|实战3:Http服务器(多线程版本)] 项目实战 实战3:Http服务器 我们今天来进一步开发我们的Http服务器,用多线程实现. 我 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(25)|实战2:命令行工具minigrep(2)]
[易学易懂系列|rustlang语言|零基础|快速入门|(25)|实战2:命令行工具minigrep(2)] 项目实战 实战2:命令行工具minigrep 我们继续开发我们的minigrep. 我们现 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)]
[易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)] 项目实战 实战2:命令行工具minigrep 有了昨天的基础,我们今天来开始另一个稍微有点 ...
随机推荐
- HDU 5351——MZL's Border——————【高精度+找规律】
MZL's Border Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- Jquery 全局错误处理
$.ajaxSetup({ complete: function (request, status) { if (typeof (request) != 'undefined') { var resp ...
- ASP.NET MVC 音乐商店 - 4. 数据访问
上一次,我们使用了模拟的数据从控制器发送到视图模板.现在,我们开始使用真正的数据库,在这个教程中,我们将指导如何使用 SQL Server Compact 版的数据库,它经常被称为 SQL CE, 来 ...
- java右移>> 无符号右移>>>
>>>是无符号右移,在高位补零 >>是带符号的右移,如果是正数则在高位补零,负数则补1 int a = -1; System.out.println(a>>1 ...
- Javascript基础--函数(Function对象)
1.函数是一段可执行的代码,函数可多次调用,模块化管理. 2.使用function语句,function funName([arg1][,arg2]....[,argn]){代码块}.所有版本可用,一 ...
- s7nodave用于上位机连接西门子PLC,开源项目epics
s7nodave 可以看作是Prodave的开源替代者,在PLC侧,不需要编程 This device support does not require any special programming ...
- org.apache.xmlbeans.XmlException: error: does not close tag
使用myeclipse的jax自动生成webservice , 或者serviceImpl通过@webservice来实现webservice时, 使用soap UI (我测试使用的版本 5.2.1) ...
- 《孵化Twitter》:Twitter创始人勾心斗角史,细节披露程度令人吃惊
本书详细讲述twitter的发展史.感觉基本上是一部创始人从朋友变敌人,勾心斗角的历史.Twitter本身的产品发展反而相对比较简单. 书中披露了许多email.谈话.会议的细节,作者说这些是数百个小 ...
- 【转载】#330 - Derived Classes Do Not Inherit Constructors
A derived class inherits all of the members of a base class except for its constructors. You must de ...
- 【LOJ116】有源汇有上下界最大流(模板题)
点此看题面 大致题意: 给你每条边的流量上下界,让你先判断是否存在可行流.若存在,则输出最大流. 无源汇上下界可行流 在做此题之前,最好先去看看这道题目:[LOJ115]无源汇有上下界可行流. 大致思 ...