2023年7月20日
柱状图-隔行变色
摘要： 效果图： 代码： const chart = this.refs.vChartRef.chart function upOpt() { chart.setOption({ tooltip: { trigger: "axis", show: true, backgroundColor: "rgba(0 阅读全文
posted @ 2023-07-20 17:36 大云之下 阅读(35) 评论(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 大云之下 阅读(62) 评论(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 大云之下 阅读(26) 评论(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 大云之下 阅读(33) 评论(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 大云之下 阅读(53) 评论(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 大云之下 阅读(46) 评论(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 大云之下 阅读(32) 评论(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 大云之下 阅读(37) 评论(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 大云之下 阅读(42) 评论(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 大云之下 阅读(66) 评论(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 大云之下 阅读(38) 评论(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 大云之下 阅读(50) 评论(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 大云之下 阅读(12) 评论(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 大云之下 阅读(28) 评论(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 大云之下 阅读(28) 评论(0) 推荐(0) 编辑
大云之下