echarts
麻辣_水煮鱼
游啊游
展开
-
echarts文本过长显示...
echarts文本过长显示...原创 2022-08-29 17:18:16 · 192 阅读 · 0 评论 -
echarts仪表盘式进度条
效果图如下:let myChart = echarts.init(this.$refs.echarts); let value = (this.data.yh_zg / this.data.yh_total*100).toFixed(2); // 绘制图表 let option = { radius: '480%',//仪表盘放大,默认的图太小了 series: [ // 背景 { .原创 2022-05-09 14:16:11 · 2910 阅读 · 0 评论 -
echarts legend图例显示数值和百分比
在legend中以回调函数形式配置formatter: formatter: function(name) { var data = option.series[0].data; var total = 0; var tarValue; for (var i = 0; i < data.length; i++) { total += data[i].value...转载 2022-04-13 15:46:28 · 6678 阅读 · 1 评论 -
vue项目引入echarts报错undefined
引入echarts后使用 一直报错undefined,但是package里确实有这个包,然后换了种引入方式:constecharts=require("echarts");然后就可以了。原因:安装的echarts版本是5.1的,可能版本太高不支持,换成4.*版本就不会报错...原创 2021-06-23 11:42:55 · 2496 阅读 · 0 评论 -
vue使用echarts绘制地图
由于vue-echarts网上能找到的资源太少了,鼓捣了好久地图也没出来,最后还是放弃了,还是用echarts吧。直接贴代码<template> <div class=""> <div id="map" :style="{ height: '800px', width: '100%' }" ref="myEchart"></div> </div></template><script&g.原创 2021-02-20 17:33:24 · 2983 阅读 · 3 评论 -
在vue-cli4中使用vue-echarts
1.安装vue-echartsnpm安装npm install echarts vue-echartsCDN< script src = “ https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js ” > < / script >< script src = “ https://cdn.jsdelivr.net/npm/vue-echarts@4.0.0 ” > < / script.原创 2020-12-10 14:58:24 · 1291 阅读 · 1 评论 -
echarts每个柱条设置不同的颜色
本来好好的柱子,今天要求柱条颜色要用系统名称对应的颜色,如下图。(花里胡哨的,但是我不发表任何意见,让我改我就改-------一个莫得感情的代码搬运工)实现代码var provideNumber = 4; if($(document.body).width() > 1800){ provideNumber = 6; } var myCharts = echarts.init(document.getElementById('usersChart'.原创 2020-05-27 10:29:01 · 5681 阅读 · 0 评论 -
关于echarts 重绘/图表切换/数据清空
做一个图表切换切成表格再切回图表时,总是渲染不上,发现要渲染的容器_echarts_instance属性即使在切成表格时也一直存在,图表显示不出来应该跟这个有关系。百度之后终于找到了解决办法。容器id为mainvar myChart=document.getElementById("main")myChart.removeAttribute("_echarts_instance_"); // 移除容器上的 _echarts_instance或者myChart.dispos...转载 2020-05-22 09:39:09 · 2005 阅读 · 0 评论 -
echarts 常用配置项
每次写echarts 修改样式时,要么就是翻以前代码,要么找官方api,太浪费时间了,就把常用到的一些记录下来做个笔记,方便下次查看。1.修改柱条颜色1.1修改柱条颜色为纯色series: [ { name: '个数', type: 'bar', label: { normal: { show: true, position: 'inside'原创 2020-05-21 11:29:50 · 1374 阅读 · 0 评论 -
echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)
echarts 的tooltip提示框中小圆点颜色默认是跟 柱状颜色或者折线图折现颜色是保持一致的,但现在需求是小圆点颜色要跟左上方的边框颜色(数字颜色)对应起来。打印params如下:发现marker(小圆点)即为html片段,要改变小圆点颜色只需自定义html即可。附代码:formatter: function(params) { var result = '...原创 2020-03-23 08:50:52 · 13124 阅读 · 1 评论 -
echarts重绘后之前的点击事件仍触发
今天用echarts的时候发现一个问题鼠标点击不同地市触发一个事件展示该地区趋势图 (点击郑州市展示郑州地图,点击某县展示县级信息)但是后台中不管我第几次鼠标点击都会触发两次指向事件(点击市级触发了点击省和点击市的事件,点击县触发了省市县的事件)现在贴出解决办法:myChart.off('click')// 解决点击事件调用n次的问题 // ...原创 2020-02-29 10:53:23 · 587 阅读 · 0 评论 -
echarts重绘
echarts第一次渲染的时候没有问题,但是遇到第二次渲染的时候,上一次的残留下来的数据也会被再次渲染出来只要在setOption中函数中,添加一个truemyChart.setOption({},true);//true重绘就可以解决echarts的渲染问题...原创 2020-02-28 11:10:18 · 1355 阅读 · 0 评论 -
echarts x轴文本太长的几种解决办法
1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 nameLocation:'end',//坐标轴名称显示位置。 axis...转载 2019-12-16 14:55:57 · 323 阅读 · 0 评论 -
ajax动态获取后台数据绘制echarts图表
Echarts是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表,是一款很好用的前端报表制作工具。动态获取后台数据绘制echarts图表可以使用jQuery的a...原创 2019-01-10 15:21:43 · 3618 阅读 · 2 评论 -
echarts x轴文字显示不全
使用echarts绘制图表时,当数据量比较多时,我们会发现x轴文字显示不全,出现如下图的情况。echarts图表中有个axisLabel配置项,是坐标轴刻度标签的相关设置。interval属性是坐标轴刻度标签的显示间隔,默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。还有一个属性:rotate: number 度角是倾斜的控制所在,在类目轴的类目标签显示不下的时候可以...原创 2019-01-10 15:42:21 · 7048 阅读 · 2 评论