echarts
关注
分享
扫一扫
浩星
95后的我从小鲜肉变成老腊肉了
展开
-
vue项目中使用echarts5
前言： echarts中升级到版本5以后，使用方法发生了改变，注意不兼容ie8了，还有引入方法改变了。使用步骤：1、安装：cnpm install echarts --save2、引入：去除 default exports 的支持v4及其之前：引用echarts：import echarts from 'echarts';// 或者按需引入import echarts from 'echarts/lib/echarts';v5版本import ...原创 2021-07-22 18:45:43 · 2197 阅读 · 0 评论 -
echarts实现横向柱图文字在柱图上面（升级版本）
前言：echarts实现横向柱图文字在柱图上面效果图：实现源代码：<div id="lip" style="width:100%;height:800px;"></div><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script><script> function initEchartsFh() { ...原创 2021-03-16 18:13:08 · 4417 阅读 · 5 评论 -
echarts实现横向柱图文字在柱图上面
前言： echarts实现横向柱图文字在柱图上面效果图：实现源代码：<div id="lip" style="width:100%;height:800px;"></div><script> function initEchartsFh() { var myChart = echarts.init(document.getElementById('lip')); var option = { ..原创 2021-03-16 11:15:25 · 6033 阅读 · 1 评论 -
echarts实现动态的图表
前言： echarts图表实现动态仪表效果效果图：实现代码： let angle = 0;//角度，用来做简单的动画效果的let value = 40;option = { backgroundColor:"#022C2B", title: { text: '{a|'+ value +'}{c|%}'+'\n'+'{b|资料管理}', x: 'center', y: 'center', ...转载 2020-08-28 14:06:55 · 2752 阅读 · 0 评论 -
echarts自传作品入口
入口：https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=follow部分截图：转载 2020-08-28 14:11:52 · 1758 阅读 · 5 评论 -
echarts图环形图带百分比
前言： 整理一些echarts中比较有个性的效果图：实现代码：option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直达', '营销广告', '搜索引擎', ...原创 2020-07-21 17:34:58 · 8616 阅读 · 0 评论 -
vue中echarts点击事件点击一次多次触发
前言： vue中使用echarts图，并且使用他的点击事件就会发现一个问题，第一次我echarts图的点击事件是生效的而且正常的，但是一旦重新渲染这个echarts图以后，就会出现再重新渲染一次，（相当于2次渲染echarts图），点击事件会被调用2次，第二次重新渲染，点击事件就会被调用3次，这个问题。问题展示：(我这里是调用后台，我的日历刷新一次时间，就会重新渲染一次我的echarts图)正常点击事件（前，点击一次调用一次后台）：...原创 2020-05-21 14:33:59 · 3754 阅读 · 6 评论 -
echarts折线图多条线时候展示效果不对
前言： 在使用echarts折现多跟线图直接用官方案例的时候，会遇到一个特别坑的问题，就是数据和绘制图对不上的问题：效果图：解决办法：把这个stack去掉...原创 2020-04-03 14:37:38 · 3788 阅读 · 14 评论 -
vue+阿里的G2图表-antv+折线图
前言： 之前使用的图表是echarts+highcharts两个常用图表的，现在的话因为项目需要和别的原因也接触使用了阿里的g2图表，感觉效果还是挺好的，在这里分享下官网入口实现效果：实现步骤：第一：安装插件npm install @antv/g2 --save第二：lineCharts.vue，注意，图表这类型的数据必须mouned赋值一次，watc...原创 2019-11-12 19:56:54 · 13865 阅读 · 0 评论 -
vue+echarts+双层仪表盘效果
老规矩，先看效果图：在vue中实现echarts图的话会面临一个问题，如果我们是写死的数据可能显示正常，但是如果是通过vuex版本控制拿到的数据就会有个时间差，我们还没有拿到数据时页面已经渲染了，面对这个问题可以通过在vue中用watch监听的方法，让他在拿到数据以后再次渲染下页面调用方法：//页面部分，其中Gztdtj.tq.data.value为后台拿来的值 比如：15&...原创 2019-07-19 09:47:20 · 3731 阅读 · 0 评论 -
echart图中加一条直线
老规矩，先看效果：这里主要用echarts的markLine 来实现，下面是代码；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>echarts.js案例一</title> <script ...原创 2019-06-17 09:26:37 · 9944 阅读 · 0 评论 -
用echarts实现水滴图效果
老规矩，看效果先：（这里的水滴是动态的）注意，这里是使用echarts,除了原先的echarts.js外还得引入一个水滴图用的js===echarts-liquidfill.js可以官网也可以等到最下面，会有网盘地址，去提取下： var arrWatter1={}; arrWatter1.warterId = 'water_echarts_hd'; arrWa...原创 2019-04-30 16:50:17 · 8868 阅读 · 0 评论 -
echarts柱状类似进度条样式
先看看效果图：var arr={}arr.fhId = "demo_echarts_fh";//负荷的idarr.fhArr=[ {"name":"10kv金羊线","value":"10"}, {"name":"10kv金海线","value":"20"}, {"name":"10kv金东线","value":"30"}, {"name":"10kv金澳线","value"...原创 2019-03-19 14:29:52 · 6948 阅读 · 13 评论 -
echarts中多y轴图像（柱，折）
先看看效果吧：var myChart = echarts.init(document.getElementById('demo_echarts_zyyh'));//放入的id var colors = ['#e6bcff', '#a3ffcd', '#fefefe']; option = { color: colors, textStyle:{ color: '#...原创 2019-03-20 09:53:07 · 1156 阅读 · 0 评论 -
echarts折现图的点击事件===非常简单哦，直接在后面加事件
先看效果图吧：一般我们echars的折现图设置点击事件时，只能点击那个点，特别的不方便，在这里我们在用一种方法让他可以划过点击，可以打印看下得到的数据 myChart.setOption(option,true); myChart.getZr().on('click', function (params) { var pointInPixel= [params.offs...原创 2019-03-19 14:39:03 · 10594 阅读 · 7 评论 -
如何调用百度接口来实现全国的撒点效果（在这里把百度接口的文档荡到本地了）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=EDGE"> <title>ECharts</原创 2018-07-04 18:03:38 · 286 阅读 · 0 评论 -
如何用eachart来做一个全国地图撒点的效果
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=EDGE"> <title>ECharts</原创 2018-07-04 17:58:47 · 2430 阅读 · 0 评论 -
用echarts来实现多重环形图
老规矩先看效果：然后就是贴代码啦：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>echarts.js案例一</title> <script type=&quo原创 2019-03-14 17:26:33 · 9620 阅读 · 2 评论