07 2023 档案

柱状图-隔行变色
摘要：效果图： 代码： const chart = this.refs.vChartRef.chart function upOpt() { chart.setOption({ tooltip: { trigger: "axis", show: true, backgroundColor: "rgba(0 阅读全文
posted @ 2023-07-20 17:36 大云之下 阅读(47) 评论(0) 推荐(0)
柱状图-横向柱状图-不同颜色
摘要：效果图： 代码： //获取echart实例 const chart = this.refs.vChartRef.chart const data = [{ value: 800, name: '已接用' }, { value: 400, name: '剩余' }, { value: 400, nam 阅读全文
posted @ 2023-07-20 17:34 大云之下 阅读(101) 评论(0) 推荐(0)
环形图-阴影渐变
摘要：效果图： 代码： const chart = this.refs.vChartRef.chart const dataArray = [ { name: "总容量", value: 1200 }, ]; // var labelshow = true; // var centerimg = true 阅读全文
posted @ 2023-07-20 17:34 大云之下 阅读(36) 评论(0) 推荐(0)
饼图-带label引导线
摘要：效果图： 代码： const chart = this.refs.vChartRef.chart function upOpt() { chart.setOption({ color: ['#009DFF', '#22E4FF'], legend: { show: true, top: "cente 阅读全文
posted @ 2023-07-20 17:30 大云之下 阅读(52) 评论(0) 推荐(0)
环形图-展示label引导线
摘要：效果图： 代码： const chart = this.refs.vChartRef.chart function upOpt() { chart.setOption({ color: ['#009DFF', '#22E4FF'], legend: { show: true, top: "cente 阅读全文
posted @ 2023-07-20 17:28 大云之下 阅读(75) 评论(0) 推荐(0)
环形图-title-右侧显示圆状lenged
摘要：效果图： 代码： const chart = this.refs.vChartRef.chart function upOpt() { chart.setOption({ color: ['#FFCF5F', '#34DA99','#FA5151'], title: { text: '总数', su 阅读全文
posted @ 2023-07-20 17:26 大云之下 阅读(86) 评论(0) 推荐(0)
柱状图-带边框柱状图
摘要：效果图： 代码： const chart = this.refs.vChartRef.chart function upOpt() { chart.setOption({ tooltip: { trigger: "axis", show: true, backgroundColor: "rgba(0 阅读全文
posted @ 2023-07-20 17:22 大云之下 阅读(48) 评论(0) 推荐(0)
柱状图-竖状堆叠柱状图
摘要：效果图： 代码： const chart = this.refs.vChartRef.chart function upOpt() { chart.setOption({ tooltip: { trigger: 'axis', show: true, backgroundColor: 'rgba(1 阅读全文
posted @ 2023-07-20 17:19 大云之下 阅读(59) 评论(0) 推荐(0)
柱状图-无轴横向柱状图-自定义显示内容
摘要：效果图： 代码： const data = [{ value: 498, name: '1号生产线' }, { value: 460, name: '2号生产线' }, { value: 421, name: '3号生产线' }, { value: 400, name: '4号生产线' }, { v 阅读全文
posted @ 2023-07-20 17:18 大云之下 阅读(60) 评论(0) 推荐(0)
柱状图-双轴-柱状+折线 图
摘要：效果图： chart.setOption({ tooltip: { trigger: 'axis', show: true, backgroundColor: 'rgba(6,19,40,0.8)', borderColor: 'transparent', padding: [8, 20, 8, 8 阅读全文
posted @ 2023-07-20 17:15 大云之下 阅读(91) 评论(0) 推荐(0)
柱状图-横向渐变色柱状图
摘要：效果图： chart.setOption({ tooltip: { trigger: 'axis', show: true, backgroundColor: 'rgba(10, 30, 30, 0.8)', borderColor: 'transparent', padding: [8, 20, 阅读全文
posted @ 2023-07-20 17:14 大云之下 阅读(53) 评论(0) 推荐(0)
柱状图-渐变色-竖双柱状图
摘要：效果图： chart.setOption({ tooltip: { trigger: 'axis', show: true, backgroundColor: 'rgba(6,19,40,0.8)', borderColor: 'transparent', padding: [8, 20, 8, 8 阅读全文
posted @ 2023-07-20 17:13 大云之下 阅读(80) 评论(0) 推荐(0)
折线图-实心白边折线图
摘要：先看效果图： 代码如下： chart.setOption({ tooltip: { trigger: "axis", show: true, backgroundColor: "rgba(0, 0, 0, 0.4)", borderColor: "transparent", padding: [5] 阅读全文
posted @ 2023-07-20 16:18 大云之下 阅读(25) 评论(0) 推荐(0)
折线图-渐变阴影-白色中心点折线图
摘要：先看效果图： 代码如下： chart.setOption({ tooltip: { trigger: 'axis', show: true, backgroundColor: 'rgba(6,19,40,0.8)', borderColor: 'transparent', padding: [8, 阅读全文
posted @ 2023-07-20 16:16 大云之下 阅读(39) 评论(0) 推荐(0)
折线图-渐变阴影-实心点折线图
摘要：先看效果图： 代码如下： chart.setOption({ tooltip: { trigger: 'axis', show: true, backgroundColor: 'rgba(6,19,40,0.8)', borderColor: 'transparent', padding: [8, 阅读全文
posted @ 2023-07-20 16:14 大云之下 阅读(56) 评论(0) 推荐(0)
el-tree树点击全选按钮，全部展开并且全选
摘要：先看图： 代码如下： // 全部选中 qxClick() { this.isQx = !this.isQx; // 判断按钮的状态 this.expandAll(); if (this.isQx) { console.log(this.isQx, " ", this.datas); // 设置 th 阅读全文
posted @ 2023-07-04 16:52 大云之下 阅读(1225) 评论(0) 推荐(0)

大云之下