Echarts
idomyway
这个作者很懒,什么都没留下…
展开
-
ECharts3实例 定制XY轴、柱状图
前言 实现如下效果图解决方法option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisPointer: { type: 'shadow' }, axisLabel: {原创 2020-12-16 22:47:46 · 468 阅读 · 0 评论 -
ECharts3实例 定制图例、XY轴、叠加柱状图
前言 实现如下效果图解决方法option = { tooltip: { trigger: 'axis', backgroundColor: "rgba(255,255,255)", //设置背景图片 rgba格式 color: "black", borderColor: "gray", //设置边框颜色 textStyle: {原创 2020-12-16 22:41:38 · 612 阅读 · 2 评论 -
ECharts3实例 定制图例、XY轴、折线柱状混合图
前言 实现如下效果图解决方法option = { // tooltip: { // trigger: 'axis', // axisPointer: { // type: 'cross', // crossStyle: { // interval:false, // color: '#999'原创 2020-12-16 22:34:48 · 398 阅读 · 0 评论 -
Echarts3实例 map地图值渲染
前言 Echarts Map中的地图需要按照区域所绑定的值进行渲染,以展示不同区域的属性值。实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit原创 2018-12-18 18:39:31 · 5143 阅读 · 0 评论 -
Echarts3实例 map地图加载点数据
前言 Echarts map地图展示坐标点,并能更具不同的属性值进行区分,展示点数据依赖于Echarts的散点图scatter、effectScatter,底图依赖于geo。 geo:地理坐标系组件。地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。 ...原创 2018-12-18 18:37:21 · 24570 阅读 · 6 评论 -
Echarts3实例 map地图选中高亮显示
前言 Echarts Map中实现点击区域高亮,点击事件实现实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&原创 2018-12-18 18:33:17 · 33074 阅读 · 7 评论 -
Echarts3实例 加载地图
前言&nbsp;&nbsp;&nbsp;&nbsp;Echarts加载GeoJson数据生成canvas地图,可以实现地图简单的展示,获取GeoJson数据的方法见:&nbsp;&nbsp;&nbsp;&nbsp;Echarts生成地图的数据加载方式有两种:加载GeoJson的js文件加GeoJson的Json文件加载GeoJson的js文件显示地图原创 2018-12-18 18:30:02 · 4154 阅读 · 0 评论 -
Echarts3 map类型生成地图文件GeoJson方法
前言 使用Echarts加载Map地图,最重要的事获取Map的GeoJson数据,只有存在GeoJson的情况下,才是进行工作的基础。官方矢量地图下载数据 可以在Echarts官方网站上下载地图数据: &原创 2018-12-18 18:25:27 · 3371 阅读 · 0 评论 -
Echarts3实例 环形多标注图
前言 在实现环形图的时候,label属性只能设置在内部和外部,不能实现同时存在的,这时,需要同Echarts的graphic属性作为label标签进行替代和填充。实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="原创 2018-12-23 18:21:18 · 2735 阅读 · 0 评论 -
Echarts3实例 多环形气泡图
前言 通过设置多个环形图的半径和位置组合实现气泡图。实现效果###实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&a原创 2018-12-22 20:54:43 · 3034 阅读 · 0 评论 -
Echarts3实例 叠加柱状图
前言 堆叠柱状图本身是不难实现的,在项目上需求遇到在柱状图上边,添加统计label。实现效果实现代码 思路: 添加新的series放在最上层,让series隐藏,并设置label显示统计原创 2018-12-22 20:53:14 · 10953 阅读 · 2 评论 -
Echarts3实例 环形图
前言 环形图本质上就是饼图,我们把饼图的半径设置成阶段范围内的值域,饼图就变成了环形图。实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title原创 2018-12-22 20:21:25 · 3062 阅读 · 0 评论 -
Echarts3实例 柱状折线图
实现效果知识点Y轴垂直标题柱状折线联合使用代码实现option = { title: { text: '2018年项目入库统计', top:10, left:10 }, tooltip : { trigger: 'item', ...原创 2018-09-04 20:50:16 · 550 阅读 · 0 评论 -
Echarts3实例 南丁格尔饼图
实现效果知识点图例垂直,位置饼图位置设置多种颜色Tooltip格式化代码实现option = { title: { text: '管线管龄分类统计', top:10, left:10 }, tooltip : { trig...原创 2018-09-04 20:48:54 · 1404 阅读 · 0 评论 -
Echarts3实例 双Y轴折线图
实现效果知识点双Y轴:yAxisIndexY轴垂直标题调整左侧Y轴刻度代码实现option = { title: { text: '2018年管线数据利用统计', top:10, left:10 }, tooltip : { ...原创 2018-09-04 20:47:15 · 18005 阅读 · 4 评论 -
Echarts3实例 双Y轴柱状图
实现效果知识点双Y轴:yAxisIndexY轴垂直标题最大最小值显示调整左侧Y轴刻度代码实现option == { title: { text: '2018年管线设施分类统计', top:10, left:10 }, tooltip : ...原创 2018-09-04 20:46:06 · 12552 阅读 · 1 评论 -
Echarts3实例 光滑折线图—垂直Y轴标注
实现效果知识点折线光滑设置grid设置标题,toolbarY轴垂直标题代码实现option = { title: { text: '近十年管线长度变化', top:10, left:10 }, tooltip : { trigger: 'axis', ...原创 2018-09-04 20:44:12 · 2785 阅读 · 0 评论