echarts
剑雪封喉r
这个作者很懒,什么都没留下…
展开
-
用 echarts画图时tooltip.formatter参数params不会更新
使用echarts画地图时,遇到一个很奇怪的问题。首先说明我的目的:为了让地图漂亮些,不同的地图区域显示不同的颜色。由于待绘制的地图二级地市数量不确定,需要通过解析获取到的数据来确定,因此我在series的itemStyle中采用了函数来进行传递数值。itemStyle: { //normal 是图形在默认状态下的样式; normal: { //每个柱子的颜色即为c...原创 2018-05-25 09:42:01 · 5345 阅读 · 0 评论 -
Echarts学习之十五:visualMap
visualMap=[ //视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素。视觉元素可以是:symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlpha...原创 2018-06-20 09:29:23 · 51643 阅读 · 10 评论 -
Echarts学习之十六:dataZoom
dataZoom=[ //区域缩放 { id: 'dataZoomX', show:true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。 backgroundColor:"...原创 2018-06-20 09:29:28 · 2861 阅读 · 0 评论 -
Echarts学习之十七:legend图例
legend={ show:true, //是否显示 zlevel:0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 z:2, ...原创 2018-06-20 09:29:41 · 1429 阅读 · 0 评论 -
Echarts学习之十八:tooltip提示框
tooltip ={ //提示框组件 trigger: 'item', //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 triggerOn:"m...原创 2018-06-20 09:29:53 · 17999 阅读 · 0 评论 -
Echarts学习之十九:title标题
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lig...原创 2018-06-20 09:29:47 · 1045 阅读 · 1 评论 -
Echarts学习之二十:全解注释
学习了百度Echart官方教程,不得不说官方教程还是非常不错了。这里对Echart所有教程知识进行了总结。 自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的Echarts编程知识。让你一个demo掌握Echarts所有编程,如果有问题可以留言。此demo除了必须的链接文件外,主要包括17个文件:index.html和index.js、coordinate-geo.js、coordi...原创 2018-06-20 09:30:03 · 2294 阅读 · 0 评论 -
Echarts学习之二十一:开发参数配置全解
Echarts简介6个公共组件: Echarts工具的完整使用包括title标题、tooltip提示框、toolbox工具栏、legend图例、dataZoom缩放控制、visualMap视觉映射,6个公共组件。5种坐标系参数配置: 包括geo地理坐标系、grid直角坐标系、parallel平行坐标系、polar极坐标系、radar雷达坐标系,5种坐标系参数配置。19种类型的数据图表: 包括bar...原创 2018-06-21 09:08:52 · 525 阅读 · 1 评论 -
Echarts学习之二十二:echarts实例的相关操作
//这里是关于echarts实例的相关操作var myChart = echarts.init(dom); //使用dom初始化echarts,创建echartsInstanceheight = myChart.getHeight(); //获取高度width = myChart.getWidth(); //获取宽度option1...原创 2018-06-21 09:08:56 · 3680 阅读 · 0 评论 -
Echarts学习之二十三:action图表行为的相关操作
图表行为用于触发能够改变图表显示的相关动态功能,event事件用于接收action触发的行为,所以action行为要配合event事件一块学习//触发图表行为(更改变图表显示的相关动态),例如图例开关legendToggleSelect, 数据区域缩放dataZoom,显示提示框showTip等等//通过不同的type触发不同的行为myChart.dispatchAction({ t...原创 2018-06-21 09:08:59 · 11057 阅读 · 5 评论 -
Echarts学习之二十四:grid直角坐标系(xAxis、yAxis)
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... ...原创 2018-06-21 09:09:03 · 1972 阅读 · 0 评论 -
Echarts学习之二十五:toolbox工具框
toolbox={ show : true, //是否显示工具栏组件 orient:"horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical' itemSize:15, ...原创 2018-06-21 09:09:07 · 13760 阅读 · 0 评论 -
Echarts图表自适应宽高大小
近项目用到了Echarts,他要求在容器上以行内样式固定宽高。这就无法按照浏览器大小进行自适应调整。经过一番纠结发现了解决方法.官网描述的截图如下:这个鬼东西,简直是反人类的设定好吗。这都什么年代了不能自适应的网站是不可以滴。我在这个项目使用的是百分比布局。先说下整体的思路,就是在Echarts的容器外面套一个盒子来自适应屏幕大小,然后用js获取盒子宽高在赋值给Echarts容器。...原创 2019-06-06 11:33:08 · 7742 阅读 · 0 评论 -
Echarts学习之十四:parallel平行坐标系
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... ...原创 2018-06-20 09:29:18 · 3436 阅读 · 0 评论 -
Echarts学习之十三:polar极坐标系
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... ...原创 2018-06-20 09:29:13 · 5901 阅读 · 5 评论 -
Echarts学习之一:event图表事件
event事件用于接收用户的相关事件和action触发的图表的行为。图表行为用于触发能够改变图表显示的相关动态功能,event事件用于接收action触发的行为,所以action行为要配合event事件一块学习。//在 ECharts 中主要通过 on 方法添加事件处理函数,该文档描述了所有 ECharts 的事件列表。//ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会...原创 2018-06-15 10:11:57 · 3992 阅读 · 1 评论 -
Echarts学习之二:series-scatter散点图
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... f...原创 2018-06-15 10:22:03 · 3992 阅读 · 0 评论 -
Echarts学习之三:series-radar雷达图
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... ...原创 2018-06-15 10:30:12 · 3121 阅读 · 0 评论 -
Echarts学习之四:series-pie饼图
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... f...原创 2018-06-15 10:31:56 · 6307 阅读 · 2 评论 -
Echarts学习之五:series-map地图
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... ...原创 2018-06-15 10:32:52 · 6646 阅读 · 3 评论 -
Echarts学习之六:series-line线图
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... f...原创 2018-06-15 10:33:40 · 7029 阅读 · 0 评论 -
Echarts学习之七:series-heatmap热力图
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... f...原创 2018-06-15 10:34:24 · 10999 阅读 · 1 评论 -
Echarts学习之八:series-graph关系图
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... f...原创 2018-06-15 10:35:13 · 14036 阅读 · 5 评论 -
Echarts学习之九:series-effectscatter特效散点图
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... f...原创 2018-06-15 10:36:03 · 8955 阅读 · 0 评论 -
Echarts学习之十:series-bar柱形图详解
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... f...原创 2018-06-15 10:36:52 · 7371 阅读 · 0 评论 -
Echarts学习之十一:地理坐标系geo
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... ...原创 2018-06-20 09:28:57 · 10773 阅读 · 1 评论 -
Echarts学习之十二:radar雷达坐标系
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... ...原创 2018-06-20 09:29:04 · 4371 阅读 · 0 评论 -
Echarts如何间隔一段时间自动显示提示(tooltip)
摘要:今天我领导给我提了一个需求,想要大数据展示平台的tootip框能够每隔3秒钟自动显示出来。然后我就开始百度还有看了看文档。需要实现的效果如下图:(数据不能放真实项目的数据,我是模拟的)具体实现:1、我先上代码,然后再解释吧<!DOCTYPE html><html><head> <meta charset="utf-8"&g...原创 2019-07-16 07:51:35 · 3879 阅读 · 0 评论