ECharts
mighty13
这个作者很懒,什么都没留下…
展开
-
ECharts 示例——双Y轴
当前ECharts版本为5.1.2。 概述 按照对ECharts双Y轴图进行如下设置: 两个Y轴共用1个X轴。 数据系列:修改柱子和折线颜色 数据标签:修改字体大小、样式 数据组件:使用dataset提供数据,便于使用表格数据 配置项 option = { legend: { data: ['销量(支)', '营业额(万元)'] }, dataset:{ source:[ ['2020年12月', 13700, 287]原创 2021-07-09 19:20:34 · 31677 阅读 · 0 评论 -
ECharts 示例——圆环图:数据标签详细设置
当前ECharts版本为5.1.2。 概述 按照其他可视化工具中圆环图的默认样式,对ECharts圆环图进行如下设置: 标题:设置标题位于圆环中央,修改标题字体大小和颜色 数据标签:修改字体大小、样式 数据标签:格式化标签文本,显示百分比 数据标签:设置标签颜色与饼块颜色相同 数据标签:显示引导线 提示框:显示提示框 配置项 option = { tooltip: { trigger: 'item' }, title: { text:"股权结构"原创 2021-07-08 23:31:41 · 39021 阅读 · 1 评论 -
ECharts 示例——基础柱状图:包含常规组件
当前ECharts版本为5.1.2。 概述 按照其他可视化工具中柱状图的默认样式,对ECharts基础柱状图进行如下设置: 标题,副标题:设置居中,修改字体大小 图例:设置图例位置 工具栏:显示工具栏 背景色:设置为白色 坐标轴标签:设置居中显示、标签与轴间距 数据标签:顶部显示 网格线:显示网格线 提示框:显示提示框 配置项 option = { //设置提示框 tooltip: { trigger: 'axis', axisPointer: {原创 2021-06-27 20:48:21 · 31634 阅读 · 0 评论 -
ECharts3 实现数据动态更新3+时间坐标,数据累积
代码修改自ECharts3文档异步数据加载和更新中的数据的动态更新部分,原示例固定显示若干数据,简单进行了修改,数据累积加上时间坐标。 是否累积数据的关键在于shift(),去掉shift()之后即累积数据。其实ECharts3之后更新数据挺简单的,越来越清晰。 var date = []; var data = [Math.random() * 150]; var now = new Date(原创 2017-09-22 09:29:23 · 25941 阅读 · 2 评论 -
ECharts3 实现四象限图
可在ECharts3实例中的代码框中粘贴直接查看效果option = { title : { text: '男性女性身高体重分布', subtext: '抽样调查来自: Heinz 2003' }, grid: { left: '3%', right: '7%', bottom: '3%',原创 2017-09-21 18:10:28 · 33913 阅读 · 1 评论 -
ECharts3 实现动态数据累积图
原来网站上的实例是固定只显示10个数据,简单做了一些修改,1秒生成1个数据,数据累积。可在ECharts3实例中的代码框中粘贴直接查看效果 var app = {}; option = { title: { text: '动态数据', subtext: '纯属虚构' }, tooltip: { trigger: '原创 2017-09-21 18:46:27 · 27029 阅读 · 0 评论 -
ECharts3 实现动态数据累积图2+时间坐标
对ECharts3官网中动态数据+时间坐标轴实例进行了修改,X轴为当前时间,并数据累积。累积数据的方法很简单。把data.shift();注释掉就可以了。可在ECharts3实例中的代码框中粘贴直接查看效果。 function randomData() { now = new Date(+now + 1000); value = value + Math.random() * 21原创 2017-09-21 23:28:58 · 26692 阅读 · 3 评论 -
ECharts3 实现 AJAX异步加载 数据库数据
ECharts3的文档里其实对异步加载说的很明白,但是示例都是生成的随机数据,大多数应用是直接读数据库数据然后动态加载到ECharts图表里的,简单的思路就是把需要显示的数据库数据封装成json格式,然后异步获取json数据,解析显示在图表里。生成json数据不多说了,js重要部分如下: var startTime1=$("#start").html(); var endTime1=$原创 2017-09-22 08:44:07 · 25645 阅读 · 0 评论