一.echarts的介绍
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。
3.echarts的下载
（1）从 npm 获取
npm install echarts --save
（2）从 CDN 获取
（3）从 GitHub 获取

二.echarts语法
一.echarts常见术语

二.图表常见类型
bar 柱状图
line折线图
(1)曲线图
加上smooth:true;就会变成曲线图
(2)面积图
加上areaStyle:{fill:“#f70”} 会变成面积图
pie 饼形图
（1）加上radius:[80,50] 会变成环形图
三.echarts 中的样式简介
颜色主题
（1）主题可以通过切换深色模式，直接看到采用主题的效果
通过light 、dark切换
定制主题，具体可以参考官网，需要导入下载的js文件

// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
var chart = echarts.init(dom, 'vintage');
// ...

（2）color调色盘
在 option 中设置。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。
全局调色盘option.color

option.color：color: ["pink", "#ff0", "#f0f", "#0ff"]

局部调色盘series.item.color

series: [{type: 'bar',// 此系列自己的调色盘。color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab','#91ca8c','#f49f42']},

（3）itemStyle项的颜色

五.缓动动画

itemStyle:{color:“#00f” }
高亮的样式emphasis

itemStyle:{
normal:{color:"#93da6c"},
emphasis:{color:"#bcff57"}
}

特殊样式
渐变色
（1）定义渐变

// 定义渐变var linear = {type: 'linear',x: 0,y: 0,x2: 0,y2:1,colorStops: [{offset: 0, color: '#02bcff' // 0% 处的颜色}, {offset: 1, color: '#5555ff' // 100% 处的颜色}],global: false // 缺省为 false}

使用渐变：

itemStyle:{color:linear,borderRadius:[30,30,0,0]}

label标签
show：true是否显示
position：”insideRight“位置
formatter格式
formatter: “{a}\n{c}分”
{a}系列名
{b}数据名
{c}数值
{d}百分百
rich富文本

series:[
{type:"pie",radius:[200,110],data:[
{name:"百度",value:1200,
label:{show:true,
position:"center",
// {d}百分比 {big|内容} 使用样式
formatter:"{big|{d}}{small|%}\n{b}",
// 定义样式（富文本）
rich:{big:{color:"#f70",fontSize:"48px",fontWeight:900,},small:{                                            color:"#f70"}}}},
{name:"其他",value:360,
// 样式灰色
itemStyle:{color:"#ccc"},
// 标签不显示
label:{show:false},
// 提示不显示
tooltip:{show:false}}]}]}

四.动态显示局部

定义option
修改option值

动画延迟animationDelay
动画时长animationDuration,
动画缓动函数animationEasing

animationDelay: function(idx) {// 越往后的数据延迟越大return idx * 200;},animationDuration: function(idx) {// 每小格动画的时候return idx * 200;},// 弹性的方式出现动画animationEasing: "bounceInOut"}

六.事件

事件的监听
echart.on（”事件名“，处理函数）
发送事件
dispatchAction

echart.dispatchAction({type: 'showTip',
// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。seriesIndex: 0,
// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项dataIndex: ind,
// 可选，数据项名称，在有 dataIndex 的时候忽略                 position:"top",})

三.echarts应用

实践出真知，学过前面的语法，快来创建属于自己的图表吧。练习完案例，就掌握了80%的echarts。宝子们快动手练习吧。

echarts入门（详细教程）相关推荐

spring入门详细教程（五）
前言本篇紧接着spring入门详细教程(三),建议阅读本篇前,先阅读第一篇,第二篇以及第三篇.链接如下: Spring入门详细教程(一) https://www.cnblogs.com/jichi/ ...
Spring入门详细教程（四）
前言本篇紧接着spring入门详细教程(三),建议阅读本篇前,先阅读第一篇,第二篇以及第三篇.链接如下: Spring入门详细教程(一) https://www.cnblogs.com/jichi/ ...
Spring入门详细教程（三）
前言本篇紧接着spring入门详细教程(二),建议阅读本篇前,先阅读第一篇和第二篇.链接如下: Spring入门详细教程(一) https://www.cnblogs.com/jichi/p/101 ...
Spring入门详细教程（二）
前言本篇紧接着spring入门详细教程(一),建议阅读本篇前,先阅读第一篇.链接如下: Spring入门详细教程(一) https://www.cnblogs.com/jichi/p/1016553 ...
ThinkJS框架入门详细教程（二）新手入门项目
一.准备工作参考前一篇:ThinkJS框架入门详细教程(一)开发环境安装thinkJS命令 npm install -g think-cli 监测是否安装成功 thinkjs -v 二.创建项目 ...
NMAP入门详细教程
NAMP入门详细教程一.功能: 网络扫描和嗅探. 二.原理: 使用TCP/IP协议栈指纹准确地判断目标主机的相关信息. 三.作用: 识别活跃主机识别开放端口以及相关的服务识别主机的系统指纹路由 ...
Pandas入门详细教程
作者:luanhz 来源:小数志导读本文主要是对pandas进行入门详细介绍,通过本文你将系统性了解pandas为何会有数据分析界"瑞士军刀"的盛誉. 行文二级目录 01 关于 ...
numpy入门详细教程(一)
本讲主要介绍对numpy库和numpy库的N维数组对象:ndarray的基本了解.更多内容请看numpy入门详细教程(二) numpy: NumPy是一个开源的Python科学计算基础库,包含: • ...
python数据科学系列：pandas入门详细教程
导读前2篇分别系统性介绍了numpy和matplotlib的入门基本知识,今天本文自然是要对pandas进行入门详细介绍,通过本文你将系统性了解pandas为何会有数据分析界"瑞士军刀&q ...
springboot 入门详细教程源码
转载知乎文章 gitee官方教程+开源项目 Gitee 已认证的官方帐号 1,303 人赞同了该回答推荐以 Spring Boot 教程与 Spring Cloud 教程的详细开源项目 &quo ...

echarts入门（详细教程）

五.缓动动画

四.动态显示局部

六.事件

三.echarts应用

echarts入门（详细教程）相关推荐

最新文章

热门文章