![](https://img-blog.csdnimg.cn/20200617141057554.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
❤️❤️--echarts
echarts
suoh's Blog
My life is a straight line,turning just for you.
展开
-
用echarts在vue2中实现3d饼图
1、修改3d饼图大小,在大概244行的位置,grid3D的对象里面,修改distance属性,即可调整。在3d饼图中设置下面这两属性是没用的,所以这里请注意一下,记得去grid3D里面修改他的位置。4、修改饼图位置,这个常用,也是在grid3D这个属性里面设置,在大概240行的位置。3、修改3d饼图颜色,直接在data中的optionData里面修改就行了。2、修改3d饼图视角高度,在大概161行的位置,修改函数的第二个参数。二、在main.js中引入。直接复制粘贴吧,省事。原创 2023-10-20 17:08:54 · 8564 阅读 · 15 评论 -
echarts实现正负轴柱状图
【代码】echarts实现正负轴柱状图。原创 2023-07-31 15:20:59 · 2449 阅读 · 0 评论 -
echarts实现多层环图(复制粘贴即可)
【代码】echarts实现多层环图(复制粘贴即可)原创 2023-07-31 15:11:47 · 2811 阅读 · 0 评论 -
echarts实现正三角漏斗图
echarts漏斗图实现原创 2022-06-11 14:14:18 · 3378 阅读 · 2 评论 -
echarts折线图设置渐变半透明面积颜色
效果:渐变半透明颜色设置:在series里面设置areaStyle属性: areaStyle: { normal: { color: { x: 0, y: 0, x2: 0, y2: 1, col原创 2022-04-01 10:27:20 · 6683 阅读 · 1 评论 -
echarts关系图节点点击事件
效果:节点和边都可以点击只把核心的代码贴出来了。需要的参数,可以在打印的param里面自行获取。 this.myChart = echarts.init(document.getElementById('main')); this.myChart.on('click', function (param) { if (param.dataType == 'node') { console.log('点击了节点',param) } els.原创 2021-10-18 18:13:14 · 3431 阅读 · 0 评论 -
vue中使用echarts-liquidfill实现水波图
先看效果图:第一步:在package.json中添加依赖 "echarts": "^4.4.0", "echarts-liquidfill": "^2.0.5",然后 npm i 注意:先安装低版本的echarts-liquidfill,之前试了3.0以上的版本会报错,echarts版本可随意第二步:在main.js中引入import 'echarts-liquidfill'第三步:使用html:<div> <...原创 2021-05-06 18:40:51 · 4211 阅读 · 5 评论 -
vue中echarts图使用v-show隐藏出现图不撑满的情况
出现这个情况真是令人费解,呀呀呀呀呀!好好一个雷达图用 v-if 时会出现没有获取到dom结构而报错,所以要用v-show,但使用v-show 他是本身是结构就已经存在,当数据发生变化时,结构并没有重新渲染,所以会出现 echarts 图获取不到最外层大盒子的宽度而显示100px的情况,如下图明明设置了宽高,还不撑满!!!!解决方法:将v-show改成v-if 利用vue中自带的Vue.nextTick(function () { }) 主动触发一下图表,使之强制渲染就可...原创 2021-03-25 14:41:31 · 2502 阅读 · 3 评论 -
解决vue中echarts图用v-if控制显示隐藏时显示空白
使用v-show就解决了原创 2021-03-10 11:37:38 · 1685 阅读 · 2 评论 -
vue中给echarts图的legend显示添加百分比并给环形图中间添加文字
<div id="chartmainbarCircle"></div> data(){ return{ // 环形图数据 data8:[ {value: 335, name: '优秀'}, {value: 310, name: '良好'}, {value: 234, name: '合格'}, .原创 2021-01-15 15:29:56 · 6217 阅读 · 0 评论 -
echarts-柱状图--vue
柱状图效果:<div class="echart"> <div id="chartmainbar"></div></div>optionbar:{ color: ['#0079FE'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 .原创 2020-06-24 11:38:32 · 564 阅读 · 0 评论 -
echarts--多条曲线图--vue
效果图:<div id="chartmainbar"></div>optionbarline: { title: { text: '按变更时间统计变更次数', x: '10px', // y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px) y..原创 2020-06-24 11:31:14 · 4173 阅读 · 1 评论 -
echarts自适应PC端屏幕分辨率并且刷新echarts图不空白
<div id="chartmainbar3"></div>mounted(){ this.resizeEcharts = () => { this.$echarts.init(document.getElementById("chartmainbar")).resize(); this.$echarts.ini...原创 2020-04-13 09:27:42 · 1597 阅读 · 0 评论