ecarts
关注
分享
扫一扫
文章平均质量分 54
详细说明ecarts的配置参数
我在人间贩卖青春
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
echarts图表引入主题样式（js和json）
echarts主题样式主题样式构建工具下载主题引入echarts主题样式有两种方法：js和json引入主题引入js主题文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>主题样式</title> <style> #main{ margin: 20p原创 2021-01-24 00:51:32 · 3613 阅读 · 0 评论 -
关于echarts直角坐标系中多坐标轴的实现与效果优化
多坐标轴你是否在处理多坐标轴时，纵轴数据总是感觉不完美，视觉效果还不好呢？我们看代码+注释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多坐标轴</title> <style> #main{ margin: 20px; width:原创 2021-01-24 00:20:14 · 392 阅读 · 1 评论 -
echarts(十四)关于ecarts在大屏中的使用
大屏大屏的尺寸一般是1920*1080。大屏可以不用考虑浏览器的兼容性，只要谷歌能兼容就行。大屏的制作原理是在浏览器中，建立多个echarts 容器，将不同的echarts 图表放入其中。echarts颜色主题颜色主题是修改全局样式的方法。echarts 内置了两套主题，分别为 ‘light’ 和 ‘dark‘，其设置方法为：echarts.init(dom, 'light’)若要使用其它主题，需要去主题编辑器下载。大屏自适应大屏在自适应屏幕时要考虑两个方面：echarts原创 2021-01-23 23:44:40 · 308 阅读 · 0 评论 -
echarts(十三) 结合百度地图使用
百度地图百度地图开放平台地址社区贡献者维护的Apache ECharts (incubating)相关作品百度地图的使用方法在HTML 中引入百度地图，详情见文档<script type=“text/javascript” src=“http://api.map.baidu.com/api?v=3.0&ak=****"></script>在echarts中使用百度地图引入 echarts.js、bmap.js 以及 https://api.map.原创 2021-01-23 23:33:37 · 2937 阅读 · 0 评论 -
echarts（十二）关于echarts的响应式布局
echarts响应式布局在echarts 里，如何适配不同尺寸的屏幕呢？简单点的可以通过为尺寸、位置等属性设置百分比来实现。复杂些的就需要自定义响应规则。自定义响应规则的方法建立基础配置项 baseOption建立规则配置列表 media建立query建立此规则下的配置信息optionecharts 实例基于baseOption 和media 绘制图表const myChart = echarts.init(document.getElementById('main'原创 2021-01-21 00:23:20 · 1789 阅读 · 0 评论 -
echarts（十一）实现折线图标记点的拖拽
我是爱码士echarts实现折线图标记点的拖拽实现步骤正常绘制折线图-在折线图的所有标记点位置绘制原生图形为原生图形绑定鼠标事件：拖拽时，将原生图形的位置赋予标记点鼠标移动时，显示提示鼠标抬起时，隐藏提示 /*尺寸*/ const symbolSize = 20; /*点位*/ const data = [[0,0], [20, 20], [40,40]]; /*实例化echarts*/ const myChart = echart.原创 2021-01-21 00:18:25 · 2604 阅读 · 0 评论 -
echarts（十）高级篇（富文本标签）
高级篇同志们，装逼时刻到！！！富文本标签效果：实现步骤用formatter 写文本片段formatter:‘{a|文字内容}\n'+'{b|文字内容}\n'+'默认样式{x|样式 x}’用rich 设置文本样式const myChart = echarts.init(document.getElementById('main'));// 数据const data=[ {name:'杨戬',value:80,img:'./images/yj.jpg'},原创 2021-01-21 00:09:08 · 2920 阅读 · 0 评论 -
echarts(九) 高级篇（鼠标事件监听、组件交互事件监听、代码触发 ECharts 中组件的行为[信息高亮提示]）
高级篇监听事件ECharts 使用on 绑定事件，事件名称对应 DOM 事件名称，均为小写的字符串。如：myChart.on('click', function (params) { // 控制台打印数据的名称 console.log(params.name);});鼠标事件监听ECharts 支持常规的鼠标事件类型，包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout原创 2021-01-21 00:01:29 · 11463 阅读 · 3 评论 -
echarts(八)高级篇（区域缩放、视觉映射）
高级篇区域缩放作用：概览整体，观察细节区域缩放的方式：框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区 域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。原创 2021-01-20 23:43:47 · 1004 阅读 · 0 评论 -
echarts(七)高级篇（数据集dataset、行列映射、维度映射、编码映射）
高级篇数据集 datasetdataset 数据集组件是从ECharts 4 开始有的，用于数据管理。dataset 的优点：基于原始数据，设置映射关系，形成图表。数据和配置分离，便于单独管理。数据可以被多个系列或者组件复用。支持更多的数据的常用格式，例如二维数组、对象数组等。const mainDom = document.querySelector('#main');const chart = echarts.init(mainDom);// 数据源const sou原创 2021-01-20 23:27:44 · 7991 阅读 · 2 评论 -
echarts(六) 高级篇（异步数据的更新）
高级篇异步数据的更新请求数据的方式：ajax、fetch 都可以。数据的更新有两种思路：请求到数据后，setOption()。先setOption()，有什么先配置什么。等请求到数据后，再追加配置。注：在数据加载的过程中，还可以使用echarts 实例对象的loading 功能显示 loading：showLoading()隐藏 loading：hideLoading()思路一 请求到数据后，setOption() const myChart = echarts.i原创 2021-01-19 23:58:46 · 521 阅读 · 1 评论 -
echarts（五）高级篇（多坐标轴、复杂多坐标轴）
高级篇多坐标轴多坐标轴的常见应用就是一个图表有两个y 轴。 /*基于准备好的dom，初始化echarts实例*/const myChart = echarts.init(document.getElementById('main')); /*指定图表的配置项和数据*/const option = { /*图例*/ legend:{data:['学习人数','就业人数']}, /*提示*/ tooltip:{}, /*x 轴*/ xA原创 2021-01-19 23:45:06 · 4325 阅读 · 0 评论 -
echarts(四)常用图表（雷达图、仪表盘、地图（省市县）及其常用配置项）
入门篇ECharts 数据可视化实验室雷达 radar雷达图的每个变量都有一个从中心向外发射的轴线，所有的轴之间的夹角相等，同时每个轴有相同的刻度。雷达图表适合对比变量在数据集内的高低，比如产品性能、排名、评估等。常用配置项图例 legenddata 数据orient 排列方式horizontal 水平，默认vertical 垂直legend:{ orient:'vertical'},indicator 雷达图的指示器集合 []name 指示原创 2021-01-19 00:18:18 · 1263 阅读 · 0 评论 -
echarts(三)常用图表（折线图、饼图、散点图、K线图极其常用配置项）
入门篇ECharts 数据可视化实验室折线图 line折线图主要用来展示数据相随着时间推移的变化。非常适合用于展示一个连续的二维数据。常用配置项x轴data 类目轴数据boundaryGap 边界留白axisLabel 标签margin 标签偏移量 xAxis:{ data:['html','css','js','canvas'], boundaryGap: 0},series 系列集合type 系列类型，linename 系列名d原创 2021-01-18 23:54:57 · 1386 阅读 · 0 评论 -
echarts(二) 常用配置项及组件（标题，提示框，图例，工具栏，坐标轴，系列，标记点（线））
入门篇基本配置项需要在option配置。标题 title主标题 text副标题 subtext位置 leftleft 左对齐right 右对齐center 居中主标题样式 textStylecolorfontSize副标题样式 subtextStylecolorfontSize可见性 showtrue 可见，默认false 不可见title:{ text:'主标题', subtext: '副标题', left:'ce原创 2021-01-18 23:21:03 · 1188 阅读 · 1 评论