第一步:得到这个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:网格。就是中间区域的网格。可以改变颜色。什么的。

xAxi :直角坐标系 grid 中的 x 轴,

xAxis: {
position:"top",

position:"bottom",
inverse:true,//反转柱的位置。

},

这样,就把表格底部的字体。弄到上面去。

yAxis:直角坐标系 grid 中的 y 轴,

interval:5 ,每个y轴的间隔是5个单位。

如果想做成网格状态,这句话是关键:

yAxis.splitLine.show boolean
[ default: true ]

是否显示分隔线。默认数值轴显示,类目轴不显示。

处理方法是这样。如果想要网格。这样写:

xAxis : [
{
splitLine:{show: true},//加上网格线
type : 'category',
data: ["衬衫","羊毛衫","雪纺衫","","","","","","","","","",""],
splitArea : {show : true}//保留网格区域
}
],
yAxis : [
{
splitLine:{show: true},//加上网格线
type : 'value',
splitArea : {show : true}//保留网格区域
}
],

先学这么多。 就这样吧。。

echarts零基础快速入门的更多相关文章

  1. 序言 - PHP零基础快速入门

    我为什么要写<PHP零基础快速入门>? 原因: PHP 真心简单,适合零基础的人快速入门掌握,身边的人学习一两周上手开发的比比皆是: 市面上的文章或书籍对初学者并不友好,多半枯燥乏味,我相 ...

  2. 零基础快速入门web学习路线(含视频教程)

    下面小编专门为广大web学习爱好者汇总了一条完整的自学线路:零基础快速入门web学习路线(含视频教程)(绝对纯干货)适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利 ...

  3. 零基础快速入门SpringBoot2.0 (一)

    零基础快速入门SpringBoot2.0 (一) 一.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 1.依赖版本jdk8以上, Spr ...

  4. 小D课堂 - 零基础入门SpringBoot2.X到实战_第1节零基础快速入门SpringBoot2.0_1、SpringBoot2.x课程介绍和高手系列知识点

    1 ======================1.零基础快速入门SpringBoot2.0 5节课 =========================== 1.SpringBoot2.x课程全套介绍 ...

  5. [易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具]

    [易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具] 项目实战 实战5:实现BTC价格转换工具 今天我们来开发一个简单的BTC实时价格转换工具. 我们首先 ...

  6. [易学易懂系列|rustlang语言|零基础|快速入门|(27)|实战4:从零实现BTC区块链]

    [易学易懂系列|rustlang语言|零基础|快速入门|(27)|实战4:从零实现BTC区块链] 项目实战 实战4:从零实现BTC区块链 我们今天来开发我们的BTC区块链系统. 简单来说,从数据结构的 ...

  7. [易学易懂系列|rustlang语言|零基础|快速入门|(26)|实战3:Http服务器(多线程版本)]

    [易学易懂系列|rustlang语言|零基础|快速入门|(26)|实战3:Http服务器(多线程版本)] 项目实战 实战3:Http服务器 我们今天来进一步开发我们的Http服务器,用多线程实现. 我 ...

  8. [易学易懂系列|rustlang语言|零基础|快速入门|(25)|实战2:命令行工具minigrep(2)]

    [易学易懂系列|rustlang语言|零基础|快速入门|(25)|实战2:命令行工具minigrep(2)] 项目实战 实战2:命令行工具minigrep 我们继续开发我们的minigrep. 我们现 ...

  9. [易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)]

    [易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)] 项目实战 实战2:命令行工具minigrep 有了昨天的基础,我们今天来开始另一个稍微有点 ...

随机推荐

  1. DevExtreme 搭建Node.js开发环境

    简介 DevExtreme is a component suite for creating highly responsive web applications for touch devices ...

  2. ASP.NET Core后台任务

    之前在控制台程序中学习如何运行后台任务,ASP.NET Core中其实也有同样的方法BackgroundService,本以为跟HostedService没有区别,毕竟BackgroundServic ...

  3. 装配bean,基于xml

    一.bean的实例化方式 1.默认构造 <bean id="" class=""></bean> 必须提供默认构造方法 2.静态工厂 用 ...

  4. schema的元素数据类型(复杂数据类型)

    1.简单元素的声明 <xs:element name="元素名称" type="xs:string" default="默认值" mi ...

  5. 配置Slf4j依赖,桥接各种多个日志组件(排除commons-logging依赖的影响)

    由于各个jar组件使用的日志框架不一样,实际项目中可能会引入多个jar,通常使用的日志框架有 commons-logging log4j 若同一个项目引入多个日志组件,那么Slf4j组件会有不能捕捉到 ...

  6. Mysql慢查询 [第二篇]

    一.简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcpdu ...

  7. dojo事件绑定

    Dojo如何动态绑定事件的小demo <html> <title>事件绑定测试test</title> <head></head> < ...

  8. jquery-ui sortable 排序

      https://blog.csdn.net/u013066244/article/details/51954198 <link ref="stylesheet" href ...

  9. check_mk手动安装

    官方omd rpm包安装 yum -y install /tmp/check-mk-raw-1.2.6p2.demo-el6-34.x86_64.rpm omd create la omd confi ...

  10. C语言中头文件怎么写?(本文来源网络,由黑乌鸦进一步完善)

      c语言头文件怎么写?我一直有这样的疑问,但是也一直没去问问到底咋回事:所以今天一定要把它弄明白! 其实学会写头文件之后可以为我们省去不少事情,可以避免书写大量的重复代码.有利于整理思路.使代码脉络 ...