![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ECharts
有一种陪伴叫做jay
学习记录分享进步
展开
-
ECharts学习--样式
(一)直接样式itemStyle、textStyle、lineStyle、aeaStyle、labal(二)高亮样式在emphasis中包裹itemStyle、textStyle、lineStyle、aeaStyle、labalvar data = [{ name: '淘宝', value: 1000, itemStyle: { // 控制样式的颜色 color: 'yellow' }, label: { color: 'red原创 2020-12-03 23:06:05 · 239 阅读 · 0 评论 -
ECharts学习--调色盘
(一)调色盘它是一组颜色、图形、系列会自动从其中选择颜色。(1)主题调色盘(2)全局调色盘 (覆盖主题调色盘)在option下直接设置color属性color : ['red','pink','blue','purple','#333333'] ,会按照数组总的顺序来显示(3)局部调色盘(覆盖全局调色盘)series : [{ color:['blue','purple','#333333','red','pink',], type: 'pie',原创 2020-12-02 18:19:19 · 673 阅读 · 0 评论 -
ECharts学习--主题设置
(1)内置主题echarts中默认主题有两个:light、dark在初始化对象方法中,init可以指明:(1)dark var mCharts = echarts.init(document.querySelector('div'),'dark')(2);lightvar mCharts = echarts.init(document.querySelector('div'),'light')(二)自定义主题(1)在主题编辑器中编辑主题 网址:https://.原创 2020-12-02 17:34:51 · 1270 阅读 · 0 评论 -
ECharts学习--仪表盘
(一)仪表盘图仪表盘图主要用于进度把控一级数据范围的监控仪表盘只需要将type设置为gauge,data直接给value值便可var mCharts = echarts.init(document.querySelector('div'));var option = { series: [{ type: 'gauge', legend : { data: '剩余流量' }, data: [原创 2020-12-02 11:06:25 · 432 阅读 · 0 评论 -
ECharts学习--雷达图
(一)雷达图雷达图可以用来分析多个维度的数据与标准数据的对比情况。(1) 定义各个维度的名称,和最大值(2)再series下配置type为radar,data数据为数组里面包含对象 { name 和value }var maxData = [{name: '攻击',max: 100}, {name: '防御',max: 100}, {name: '机动',max: 100}, {name: '控制',max: 100}, {name: '治疗',max: 100}]; // 定义各个维度的原创 2020-12-02 10:47:11 · 1203 阅读 · 0 评论 -
ECharts学习--地图(二)
(一)显示空气质量var mChart = echarts.init(document.querySelector('div'));var airData = [ { name: '北京', value: 39.92 } ...];$.get('json/map/china.json', function (ret) { // 引入中国矢量地图的json文件 跨域使用vscode中Live Server // ret就是中国各个省份的矢量地图 console.log(ret);原创 2020-12-02 09:42:50 · 215 阅读 · 0 评论 -
ECharts学习--地图(一)
(一)地图的基本实现和常见配置地图图标的使用方式:(1)百度地图Api(2)矢量地图<div style="width: 700px;height: 500px;"></div><script src="./lib/echarts.min.js"></script><script src="./lib/jquery.min.js"></script> <script> var mChart =原创 2020-11-30 21:44:53 · 257 阅读 · 0 评论 -
ECharts学习--饼图
(一)饼图饼图又称圆饼图、圆形图等,它是利用圆形及圆内扇形面积来表示数值大小的图形。饼图主要用于总体中各组成部分所占比重的研究。<div style="width: 200px;height: 200px;"></div><script> var mChart = echarts.init(document.querySelector('div')); // 饼图的数据需要的是数组,数组中包含一个一个的对象,每一个对象需要name和value原创 2020-11-29 20:57:37 · 1115 阅读 · 0 评论 -
ECharts学习--直角坐标系图标常用配置
(一)直角坐标系中的常用配置直角坐标系图标:柱状图,折线图,散点图(1)网格:gridgrid是用来控制直角坐标系的布局和大小。x轴和y轴就是在grid的基础上进行绘制的。<div style="width: 600px;height: 400px;"></div><script> var mChart = echarts.init(document.querySelector('div')); var xdata = ['张三',原创 2020-11-29 15:12:07 · 599 阅读 · 0 评论 -
ECharts学习--散点图
(一)散点图散点图是由一些散乱的点组成的图表,这些点在哪个位置,是由x值和y值确定的,所以也叫xy散点图。散点图的优点:可以帮助我么推断出变量间的相关性。<div style="width: 700px;height: 400px;"></div><script> var mChart = echarts.init(document.querySelector('div')); var data = [{'height': 152,'wei原创 2020-11-28 21:37:43 · 5696 阅读 · 0 评论 -
ECharts学习--折线图
(一)常见的折线图配置<div style="width: 700px;height: 400px;"></div><script> var mCharts = echarts.init(document.querySelector('div')) var yData = [3000, 2000, 1000, 3500, 2000, 5000, 7000, 2000, 10000, 4000, 2400, 1200]; var xData原创 2020-11-27 23:21:39 · 155 阅读 · 0 评论 -
ECharts学习--通用配置
通用配置,就是指不管在什么类型的图标中,都可以使用的配置(饼状图、折线图、雷达图等等)。(一)通用配置title(1)文字样式可以通过textStyle来进行设置,这里有很多属性,例如:color(文字颜色)、fontStyle(字体风格)、fontWeight(字体粗细)等等。这里可以通过查看官方文档,结合自身需求来尽心配置。ECharts官方文档:https://echarts.apache.org/zh/option.html#title.textStyle(2)标题边框borde原创 2020-11-25 20:07:07 · 396 阅读 · 0 评论 -
ECharts学习--常用图表之柱状图
(一)7大图表在使用ECharts中,经常使用的图表类型有7种:(1)柱状图(2)折线图(3)散点图(4)饼图(5)地图(6)雷达图(7)仪表盘图(二)柱状图柱状图在生活中经常看到,比如统计期末学生的某一课科成绩的时候,如:张三 60 李四 61 王五 62 赵六 63 小明 64 小红 65 实现步骤如下(1)ECharts基本的代码结构:引入js文件...原创 2020-11-23 08:46:37 · 1628 阅读 · 0 评论 -
ECharts学习--快速上手ECharts
(一)五个步骤实现快速上手ECharts(1)引入echarts.js文件(2)准备一个容器,来装图表(3)初始化echarts实例对象(4)准备配置项(决定图表的类型、样式)(5)将配置项设置给echarts实例对象(二)echarts的基础使用...原创 2020-11-22 20:00:55 · 269 阅读 · 0 评论 -
ECharts学习--简介
什么是ECharts?ECharts是由JavaScript实现的开源可视化库。兼容性好,兼容当前绝大部分的浏览器,(IE8以上,谷歌,火狐等)。底层是依赖图形库ZRender。ECharts是完全开源免费的,它的功能十分丰富强大。ECharts的特点(1)丰富的可视化类型: 折线图、柱状图、散点图、热力图、饼状图、K线图等等(2)多种数据支持: 支持key-value数据格式 支持二维表 支持TypedArray...原创 2020-11-15 20:54:13 · 340 阅读 · 0 评论