echarts
关注
分享
扫一扫
tianmeng1999
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Echarts 交互API 全局echarts对象/echarts实例方法
文章目录全局echarts对象echartsInstance对象全局echarts对象引入了 echarts.js 就可以直接使用的// 初始化echarts.init(dom,'主题名称') // 注册主题 然后再初始化使用echarts.registertheme('主题名称',{ // 主题配置})// 注册矢量地图的JSON数据$.get('json/map/china.json', ret => { echarts.registerMap('key',jsonDat原创 2020-10-13 09:22:16 · 828 阅读 · 0 评论 -
Echarts 动画使用 加载动画/增量动画/动画配置
文章目录加载动画增量动画动画配置加载动画Echarts已经内置好了加载数据的动画，只需要在合适的时机显示或隐藏myChart.showLoading() // 显示myChart.hideLoading() // 隐藏增量动画// 重新触发setOption option可以只有变化的内容myChart.setOption(option)动画配置animation:true, // 默认是true 是否开启动画animationDuration:3000, // 动画时长 ms原创 2020-10-12 17:26:45 · 3112 阅读 · 0 评论 -
Echarts 显示相关(主题/调色盘(渐变色)/样式(直接/高亮)/自适应)
文章目录主题内置主题自定义主题调色盘主题调色盘全局调色盘局部调色盘渐变色线性渐变径向渐变 由一点向4周散发样式直接样式高亮样式 当鼠标滑过自适应主题内置主题Echarts默认内置的2套主题 light darkecharts.init(dom, 'light') 自定义主题https://www.echartsjs.comtheme-builder或者在主题编辑器中编辑主题下载主题 js文件引入页面在init中使用echarts.init(dom, 'xxx') 调色盘是一原创 2020-10-12 13:40:56 · 1264 阅读 · 0 评论 -
Echarts 仪表盘 常用配置（数值范围/多个指针/指针差异）
文章目录特点使用常用配置数值范围 min max多个指针多个指针差异特点主要用于在进度把控以及数据范围的检测可以更直观的表现某个指标的进度或实际情况使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-10-12 09:37:48 · 9967 阅读 · 6 评论 -
Echarts 雷达图 常用配置(数值/填充/绘制类型shape)
文章目录特点基本使用特点基本使用原创 2020-10-12 09:22:15 · 4177 阅读 · 0 评论 -
Echarts 地图配置 拖动缩放/初始化缩放比例/不同地区显示不同颜色/地图和散点图结合
文章目录特点基本使用百度地图API矢量地图常用配置拖动缩放 roam名称显示初始化缩放比例设置地图中心点常见效果显示某个区域不同地区显示不同颜色地图和散点图结合特点基本使用百度地图API需要申请百度地图ak矢量地图资料需要准备矢量地图数据注册矢量地图数据 echarts.registerMap('map',data)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2020-10-10 18:02:20 · 7850 阅读 · 0 评论 -
Echarts 饼图 显示数值/圆环/南丁格尔图/选中效果
文章目录基本使用常见效果显示数值圆环南丁格尔图选中效果 点击选中基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &原创 2020-10-10 16:51:00 · 2128 阅读 · 0 评论 -
echarts 直角坐标系常用配置 网格grid/坐标轴axis/区域缩放dataZoom
文章目录网格 grid坐标轴 axis区域缩放 dataZoom直角坐标系图表：柱状图 折线图 散点图常用配置网格 grid坐标轴 axis区域缩放 dataZoom网格 gridgrid是用来控制直角坐标系的布局和大小let option = { grid:{ show: true, // 显示 // 边框 borderWidth: 10, borderColor: 'red', // 位置 left top right bottom left:20, t原创 2020-10-10 15:26:22 · 1217 阅读 · 0 评论 -
echarts 散点图 气泡图scatter/涟漪动画effectScatter
文章目录特点基本使用常见效果气泡图涟漪动画 type:effectScatter特点散点图可以帮助推断出不同纬度数据之间的相关性也常用于地图的标注上基本使用身高和体重的关系 （正相关）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s原创 2020-10-10 14:49:29 · 5653 阅读 · 0 评论 -
echarts折线图 常见效果(最大值/最小值/平均值/标注区间) 线条平滑smooth 样式 填充风格areaStyle 紧挨边缘 缩放 堆叠图
文章目录折线图特点基本使用常见效果最大值 最小值 平均值标注区间 markArea线条控制平滑 smooth修改样式填充风格 areaStyle紧挨边缘 boundaryGap缩放：脱离0值比例堆叠图折线图特点通常用来分析数据随时间的变化趋势基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten原创 2020-10-10 14:06:38 · 9524 阅读 · 0 评论 -
Echarts 通用配置 title/提示tooltip/工具按钮toolbox/图例legend
文章目录通用配置标题 title提示 tooltip工具按钮 toolbox图例 legend通用配置标题：title提示：tooltip工具按钮：toolbox图例：legend标题 title文字样式textStyle标题边框borderWidth borderColor borderRadius标题位置left right top bottomlet option = { title:{ text: 'ECharts 标题 配置', //内容 textSt原创 2020-10-10 11:40:15 · 3340 阅读 · 1 评论 -
Echarts 柱状图 常见效果(最大值/最小值/平均值) 数值显示/柱宽度/横向 特点
文章目录柱状图常见效果特点标记最大值 最小值 markPoint平均值 markLine完整示例显示数值显示 label柱宽度横向柱状图柱状图常见效果特点柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况标记最大值 最小值 markPointseries: [{ name: '数据', type: 'bar', // 柱状图 markPoint:{ data:[ {type:'max',name:'最大值'}原创 2020-10-10 10:39:58 · 11848 阅读 · 11 评论 -
Echarts 初入 入门
文章目录介绍入门介绍Echarts是一个使用Javascript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。开源免费、功能丰富、社区活跃入门引入echarts.js初始化echarts实例对象配置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie原创 2020-10-10 09:14:57 · 153 阅读 · 0 评论 -
echarts 柱状图 圆角 渐变背景 根据高度实现渐变
文章目录效果圆角 渐变背景 不省略轴线文字根据高度实现渐变思路效果代码实现完整代码实现效果圆角 渐变背景 不省略轴线文字xAxis: { axisLabel:{ interval:0// 不省略x轴文字 }},series: [{ type: 'bar', barWidth:12, itemStyle:{ color:new echarts.graphic.LinearGradient( // 渐变色 0, 0, 0, 1原创 2020-06-04 13:24:41 · 1320 阅读 · 0 评论 -
echarts 折线图(波纹) 隐藏线点文字
文章目录效果隐藏线点文字 曲线完整示例效果隐藏线点文字 曲线{ name: '水泥', z:2, // 显示层级 type: 'line', symbol: "none", // 去除小圆点 //stack: '总量', //数据高度叠加 areaStyle: {}, lineStyle: {width: 0,color: 'rgba(0, 0, 0, 0)'}, //隐藏线 label: {show: false}, // 隐藏文原创 2020-06-04 11:14:38 · 5663 阅读 · 0 评论 -
echarts 饼图/环形图鼠标经过显示文本标签 图例icon
文章目录鼠标经过 显示文本标签效果关键部分图例 icon效果关键部分完整实现鼠标经过 显示文本标签效果关键部分label: { // 饼图图形上的文本标签 normal: { // 默认样式 show: false, position: 'center' }, emphasis: { // 强调样式 show: true, textStyle: { fontSize: '20',原创 2020-06-04 10:40:19 · 9829 阅读 · 2 评论 -
echart click事件
echarts完整版jsecharts源代码（开发版）js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...原创 2019-09-16 19:16:09 · 744 阅读 · 0 评论