随笔分类 -  Echarts

多个pie环形图 逆时针旋转
摘要：效果图如下 代码如下 data = [ { name: "经济目的", value: 754, }, { name: "网络安全爱好者", value: 611, }, { name: "数据窃取", value: 400, }, { name: "炫技", value: 200, }, { nam 阅读全文
posted @ 2022-05-16 15:54 橙子不是orange 阅读(312) 评论(0) 推荐(0)
Echarts 圆形立体柱状图
摘要：先放个效果图 const resData = [ { label: "上海", value: 66 }, { label: "北京", value: 26 }, { label: "苏州", value: 35 }, { label: "杭州", value: 56 }, { label: "无锡" 阅读全文
posted @ 2022-03-22 16:36 橙子不是orange 阅读(2355) 评论(0) 推荐(0)
动态循环环形图,并且解决鼠标进入时,中间循环字体不覆盖
摘要：此处贴上vue代码,直接使用即可,数据根据实际情况更换 <template> <div class="new-home_right-pie"> <div id="new-home-pie" @mouseenter="enterPie" @mouseleave="leavePie" ref="newH 阅读全文
posted @ 2021-03-08 15:43 橙子不是orange 阅读(405) 评论(0) 推荐(0)
echarts 容器宽度设置百分比,但是图表缩成一团
摘要：如图 明明设置了充满整个div,然后发现都缩成了一团,后来发现echarts不能和display:none;属性一起用 解决方法: 把v-show改成v-if就可以了充满容器了... 阅读全文
posted @ 2021-01-04 16:29 橙子不是orange 阅读(1906) 评论(1) 推荐(1)
echarts的label的formatter 自动换行
摘要：1.加 \n 2.使用extraCssText 阅读全文
posted @ 2020-12-03 14:45 橙子不是orange 阅读(13493) 评论(0) 推荐(2)
定制个性化echarts 仪表盘
摘要：option = { series: [ { type : "gauge", center: ["50%", "45%"], // 默认全局居中 radius : "90%", startAngle: '200', endAngle: '-159.99', splitNumber: 45, deta 阅读全文
posted @ 2020-12-03 13:30 橙子不是orange 阅读(752) 评论(0) 推荐(0)
Echarts 柱状图hover时单条柱子自动高亮的效果
摘要：itemStyle的emphasis是鼠标 hover 时候的高亮样式。只需series内添加 效果如下图所示 贴全部vue代码 1 <!-- 单个柱状-柱状图 --> 2 <template> 3 <div ref="singleColumn"></div> 4 </template> 5 <sc 阅读全文
posted @ 2020-05-22 16:50 橙子不是orange 阅读(8339) 评论(0) 推荐(1)
Echarts 动态折线
摘要：1.简述:项目中一个页面有三处需要这个动态折线,标线隔几秒动一次 效果图如下 2.父组件(未贴样式) 1 <template> 2 <div class="public"> 3 <v-LineChart ref="LineChart1"></v-LineChart> 4 <v-LineChart r 阅读全文
posted @ 2020-05-22 16:42 橙子不是orange 阅读(539) 评论(0) 推荐(0)
Echarts --柱状图动态提示框 tooltip
摘要：效果如图所示,阴影部分及提示框隔五秒移动一次 下面贴上echarts官网 实例中测试的源码 1 var timmerOneAnim=null; 2 var namedata = [ 3 "姑苏区", 4 "虎丘区", 5 "吴中区", 6 "相城区", 7 "吴江区", 8 "工业园区", 9 "常 阅读全文
posted @ 2020-05-22 16:09 橙子不是orange 阅读(6968) 评论(0) 推荐(0)