echarts

定义

javascript的图表的库
百度捐给apache基金会
比较符合中国人习惯
HeiCharts.D3为同行
官网：https://echarts.apache.org/zh/index.html

核心概览

instance实例
series 系列
tooltip 提示
legend 图例
xAxis x轴
yAxis y轴
toolbox 工具箱
dataZoom 缩放
vitualMap 虚拟映射

图标常用类型

bar 柱状
pie饼形
radius：[“60%”,“40%”]
line线形
areaStyle 面
smooth:true 平滑

颜色的修改

主题：自定义主题
light，dark 浅色和深色
自定义主题
https://echarts.apache.org/zh/theme-builder.html
color:调色盘
color系列调色盘
itemStyle
默认 normal
强调状态 emphasis

特别样式

渐变

  var mycolor =  {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'aqua' // 0% 处的颜色}, {offset: 1, color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色}],global: false // 缺省为 false
}

线的样式（lineStyle）

lineStyle:{width:12,cap:"round",opacity:0.7,
},

3.面的样式

areaStyle:{color:linear2,
}

数据的堆叠

stack:true

创建一个简单的柱状图

现在来创建一个简单的柱状图

<script>// 初始化echart实例var echart = echarts.init(document.getElementById("container"))//定义选项var option = {//标题title:{text:"前端大讲堂数据"},//鼠标提示tooltip:{},//图示legend:{data:["人数","人气","年龄分布"]},// x轴线xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},//y轴线yAxis:{},//系列数据series:[//名称，类型：柱状图，数据data{name:"人数",type:"bar",data:[1000,800,500,900,1300]},// areaStyle:{color:"#55ffff"},面积区域{name:"人气",type:"line",smooth:true,data:[200,600,300,770,900]},{name:"年龄分布",type:"pie",radius:["20%","10%"],left:"-50%",top:"-50%",data:[{name:"少年",value:20},{name:"青年",value:50},{name:"中年",value:30},{name:"老年",value:8},]}]}//设置参数echart.setOption(option)</script>

接下来看看效果图

echarts的初步了解和初步使用相关推荐

算法初步计算机程序,算法初步-程序框图
算法初步-程序框图 (10页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 1. 1. 2程序槌0B簿二.三课町一. 教学目标:1. 知识与技 ...
【算法笔记】【几何初步、数学初步、矩阵计算】ICPC训练联盟2021寒假冬令营（3）笔记
题目链接 A题题解:枚举法+简单直线方程知识. 本题采取枚举方法,在[-500, 500]的范围内枚举A和B,将樱桃坐标代入直线方程Ax+By,如果Ax+By大于0,则樱桃在直线方:小于0,则樱桃在直 ...
初步中的初步了解DFS以及DFT
DFS(离散傅里叶级数) 离散时间信号中存在一种周期信号,其DTFT(离散时间傅里叶变换)是不存在的,因为其不是绝对可和的.但是我们可以用一系列离散的傅里叶级数来合成该序列,这样的表示方法叫做傅里叶级 ...
项目管理过程中，如何编制初步工作说明书
最近在做一个项目的时候,客户特别苛刻,在制定工作说明书的时候,费了很多周折,把很多以前做项目的时候都不怎么会专门考虑的细枝末节和例外情况都进行了详细说明和约定,但是在项目实施过程中,却发现这样的说明和 ...
Python语言初步
Python语言初步 Python语言初步 1.python环境安装 2.第一个程序 3.一个突发奇想的idea:请手打出你会的语言的HelloWorld代码? 4.基础知识 4.1 字符编码 4.2 ...
jquery实现流程图绘制工具——展现红警三建造出兵操作 ——二、代码初步介绍，项目结构与文件介绍
目录一.简介二.代码初步介绍拓展.实现红警三录像文件读取与自动分析生成流程图信息 ======================= 大爽歌作,made by big shuang ======== ...
【Kubernetes】菜鸟学K8S之初步入门
菜鸟学K8S之初步入门 Kubernetes初步入门什么是Kubernetes 为什么用Kubernetes Kubernetes重要概念 Cluster(集群) Master(主控) 1. Kub ...
前端数据可视化ECharts使用指南——制作时间序列数据的可视化曲线
我为什么选择ECharts ? 1.容易使用,好上手,官网文档优雅清晰,案例简明美观,学习时间短. 2.开源免费,压根不要什么成本,适合我这种穷屌啊.所以,在比较了MetricGraphics.js后 ...
基于用django，mysql 以及echarts设计一个图书网页（内含js,css，img路径设置，数据库的一些常见问题）
(1)设计步骤:网页------>url路径端------>view数据传输 (1,1) 网页设计: (1,1,1)登录界面: <!doctype html> <html ...

echarts的初步了解和初步使用

如何使用echarts

echarts

定义

核心概览

图标常用类型

颜色的修改

特别样式

数据的堆叠

创建一个简单的柱状图

echarts的初步了解和初步使用相关推荐

最新文章

热门文章