Echarts
在使用Echarts插件时的一些个人总结
ᥬ 小月亮
脑子里只有快乐和梦想。
展开
-
[ECharts] There is a chart instance already initialized on the dom
【代码】[ECharts] There is a chart instance already initialized on the dom。原创 2024-03-14 16:31:25 · 129 阅读 · 0 评论 -
Echarts仪表盘3.0
【代码】Echarts仪表盘。原创 2023-11-21 11:19:08 · 128 阅读 · 0 评论 -
Echarts使用案例
echarts网站原创 2023-10-08 11:09:39 · 366 阅读 · 0 评论 -
Echarts面积图2.0(范围绘制)
【代码】Echarts面积图2.0(范围绘制)原创 2023-08-22 10:59:41 · 395 阅读 · 0 评论 -
Echarts饼图4.0(3D环形图、包含透明效果)
【代码】Echarts饼图4.0(3D环形图、包含透明效果)原创 2023-06-09 11:09:51 · 2593 阅读 · 0 评论 -
Echarts饼图4.0(圆弧分段有间隔)
【代码】Echarts饼图3.0(圆弧分段有间隔)原创 2023-06-08 16:32:29 · 812 阅读 · 0 评论 -
Echarts柱状图1.0(横向无限加载)
/ 定义定时器 clearInterval(testEcharts);// 清除定时器 let index = 5;// 初始展示5条 let realXData = [ ] let realSeriseData = [ ] for(let i = 0;i < 10;i ++) {// 设置配置项 index += 1;// 如果超出,就从第一个开始,实现轮播效果 if(index > xData . length) {index = 5;原创 2023-03-31 14:24:06 · 218 阅读 · 0 评论 -
Echarts柱状图2.0(横向、带上下滚动条)
echarts绘制滚动柱状图原创 2023-03-14 11:35:01 · 2020 阅读 · 1 评论 -
Echarts图表绘制问题及解决办法
Echarts图表绘制遇到的问题原创 2022-11-11 11:35:35 · 932 阅读 · 0 评论 -
Echarts雷达图2.0
代码:const seriseData = [{ name: 'one', value: 90 }, { name: 'two', value: 100 }, { name: 'three', value: 90 },{ name: 'four', value: 50 }]option = { radar: [ { indicator: [ { name: 'one',原创 2022-01-24 17:16:19 · 257 阅读 · 0 评论 -
Echarts饼图3.0(渐变双层圆环)
代码:const item = { value: 0.75, status: '这是我的标签', name: '这是我的名称'}option = { angleAxis: { max: 100, clockwise: false, axisLine: { show: false }, axisTick: { show: false }, axisLabe原创 2022-01-24 17:16:45 · 3288 阅读 · 0 评论 -
Echarts饼图1.0(双层饼图圆环)
代码:const sourceData = [ // 内层的数据 { name: '小学', value: 210 }, { name: '初中', value: 240 }, { name: '高中', value: 330 }, { name: '大学', value: 580 }]const arr =原创 2022-01-19 14:14:56 · 2675 阅读 · 0 评论 -
Echarts饼图2.0(三层圆环)
代码:const item = { value: 0.75, status: '这是我的标签', name: '这是我的名称'}option = { angleAxis: { max: 100, clockwise: false, axisLine: { show: false }, axisTick: { show: false }, axisLabe原创 2022-01-19 14:13:55 · 978 阅读 · 0 评论 -
Echarts矩形树图1.0
代码:const dataArr = []for(let i = 0; i < 10; i++) { const obj = { name: i, value: 20, label: { show: true, verticalAlign: 'top', align: 'center', formatter: function(params) { return ['{a原创 2022-01-19 14:12:56 · 2102 阅读 · 0 评论 -
Echarts仪表盘1.0
代码:const realVal = 0.56 // 状态的分区 const splitCopies = [0, 0.2, 0.4, 0.6, 0.8, 1] // 状态的名称 const splitTextArr = ['壹', '贰', '叁', '肆', '伍'] // 最终拿到的数据对应的状态 let realText = '' for (let i = 0; i < splitCopies.length; i++) { if (realVal === s原创 2022-01-19 14:11:51 · 134 阅读 · 0 评论 -
Echarts雷达图1.0
代码: const seriseData = [{ name: 'one', value: 30 }, { name: 'two', value: 100 }, { name: 'three', value: 90 }]option = { title: { text: '嘿嘿', left: 'center', top: 'middle', textStyle: {原创 2022-01-19 14:11:05 · 541 阅读 · 0 评论 -
Echarts饼图4.0(双层圆环图,数值正负显示不同)
代码:const value = -0.25option = { title: [{ text: value * 100 + '%', left: '44%', top: '44%', textStyle: { fontSize: 36, fontWeight: '600', color: '#333', textAlign: 'center' } }],原创 2022-01-19 14:10:12 · 2833 阅读 · 0 评论 -
Echarts面积图1.0(渐变)
代码:option = { tooltip: { trigger: 'axis', borderWidth: 0, padding: 10, textStyle: { color: '#fff' }, backgroundColor: 'rgba(0,0,0,0.65)', confine: true // 超出的部分不会被遮盖 }, grid: { left: '5%'原创 2022-01-19 14:09:05 · 2595 阅读 · 0 评论 -
Echarts仪表盘2.0(分段)
代码:// 将仪表盘分成七段,并且每一段颜色不同const colorTemplate = [ [0.144, '#d0021b'], [0.284, '#f5a623'], [0.43, '#f8e71c'], [0.57, '#7ed321'], [0.715, '#4a90e2'], [0.856, '#50e3c2'], [1, '#9013fe']]// 真正的数据const realData = 10// 指针要指向的假数据let fakeData = null// 仪表原创 2022-01-19 14:07:48 · 1678 阅读 · 0 评论 -
Echarts柱状图3.0(仿图表标域)
代码: option = { color: ['rgba(252,198,198,0.5)','rgba(189,193,207,0.5)','rgba(183,235,230,0.5)','rgba(255,222,198,0.5)','rgba(200,215,255,0.5)'], tooltip: { trigger: 'axis' }, legend: { data: ['颜色1', '颜色2','颜色3', '颜色4','颜色5原创 2022-01-19 14:06:23 · 276 阅读 · 0 评论 -
Echarts散点图1.0(圆弧坐标)
代码: var data = [[60, 20], [60, 100], [80, 70], [80, 135], [80, 220], [80, 280], [100, 310], [100, 20], [100, 160]]; option = { polar: {}, angleAxis: { splitLine: { show: false }, axisLine: { show: false }, axisTick: {原创 2022-01-19 14:04:25 · 423 阅读 · 0 评论