经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Echarts » 查看文章
echarts设置多条折线不是你想的那样简单
来源：cnblogs　　作者：南风晚来晚相识　　时间：2023/12/15 8:46:52　　对本文有异议

简单的多条折线图

  1. 小伙伴写过多条折线图的都知道，
  2. 常见的折线图是  xAxis 配置项下的 data属性上设置时间或者日期。
  3. series配置项下是对应的 legend中的数据以及该条折线的数据。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>多条折线图</title>
  7.   <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  8. </head>
  10. <body>
  11.   <div style="width: 900px;height: 400px;"></div>
  12. </body>
  13. <script>
  14.   let myChart = echarts.init(document.querySelector('div'))
  15.   // 设置X轴的时间
  16.   let dataXTime = [
  17.     '2023-12-04 09:45:07', '2023-12-04 09:50:07','2023-12-04 09:55:07', '2023-12-04 10:00:07', '2023-12-04 10:05:07',
  18.     '2023-12-04 11:05:07','2023-12-04 12:05:07','2023-12-04 13:05:07','2023-12-04 14:05:07','2023-12-04 15:05:07',
  19.   ]
  20.   let option = {
  21.     // 设置的是标题
  22.     title: {
  23.       text: '折线图'
  24.     },
  25.     tooltip: {
  26.       trigger: 'axis'
  27.     },
  28.     legend: {
  29.       data: ['Email', 'Union Ads']
  30.     },
  31.     // 网格间距设置
  32.     grid: {
  33.       left: '30px',
  34.       right: '60px',
  35.       bottom: '3%',
  36.       containLabel: true
  37.     },
  38.     xAxis: {
  39.       type: 'category',
  40.       boundaryGap: false,
  41.       data: dataXTime,
  42.     },
  43.     yAxis: {
  44.       type: 'value'
  45.     },
  46.     // 数据
  47.     series: [
  48.       {
  49.         name: 'Email',
  50.         type: 'line',
  51.         data: [120, 132, 101, 134, 90, 230, 210,90, 230, 210]
  52.       },
  53.       {
  54.         name: 'Union Ads',
  55.         type: 'line',
  56.     
  57.         data: [220, 182, 191, 234, 290, 330, 310,9, 30, 110]
  58.       }
  59.     ]
  60.   };
  61.   myChart.setOption(option);
  62. </script>
  63. </html>

发现多条折线共享一个时间

  1. 通过上面的小例子，我们发现一个问题：
  2. 多条折线共享的是一个时间(时间与数据是1对多的关系)
  3. 第一个时间匹配第一个数据，第2个时间匹配第2个数据。
  4. 也就是第n个时间匹配第n个数据。
  5. 我们不仅会提出这样一个问题：
  6. 有没有可能让每一条折线拥有自己的时间呢？
  7. 时间不同，也可以显示在一个实例上。

多条折线拥有数据自己的时间

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>多条折线图</title>
  7.   <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  8. </head>
  10. <body>
  11.   <div style="width: 900px;height: 400px;"></div>
  12. </body>
  13. <script>
  14.   let myChart = echarts.init(document.querySelector('div'))
  15.   let option = {
  16.     // 设置的是标题
  17.     title: {
  18.       text: '折线图'
  19.     },
  20.     tooltip: {
  21.       trigger: 'axis'
  22.     },
  23.     legend: {
  24.       data: ['邮件', '短信']
  25.     },
  26.     // 网格间距设置
  27.     grid: {
  28.       left: '30px',
  29.       right: '60px',
  30.       bottom: '3%',
  31.       containLabel: true
  32.     },
  33.     xAxis: {
  34.       // xAxis的下不在设置data属性共享时间
  35.       type: 'category',
  36.       splitLine: { show: false },
  37.       lineStyle: {
  38.         width: 2
  39.       },
  40.       axisTick: {
  41.         show: false
  42.       },
  43.       axisLabel:{
  44.         // 更改x轴文字颜色的配置
  45.         textStyle: {
  46.           color: '#717782'
  47.         },
  48.         showMaxLabel: true // 固定显示X轴的最后一条数据
  49.       },
  50.       // 更改x轴线的颜色
  51.       axisLine: {
  52.         lineStyle: {
  53.           color: '#D2DBE6;',
  54.           width: 1 // x轴线的宽度
  55.         }
  56.       },
  57.     },
  58.     yAxis: {
  59.       type: 'value'
  60.     },
  61.     // 数据
  62.     series: [
  63.       { 
  64.         "name": "邮件", 
  65.         "type": "line", 
  66.         "symbol": "rect",
  67.         "connectNulls": true,
  68.         "showAllSymbol": true, 
  69.         // 让每一条折线拥有数据自己的时间
  70.         "data": [ 
  71.           [ "2023-12-04 09:50:07", "0.137"],
  72.           [ "2023-12-04 09:55:07", "0.147"],
  73.           [ "2023-12-04 10:00:07", "0.137"],
  74.           [ "2023-12-04 10:05:07", "0.163"],
  75.           [ "2023-12-04 10:10:07", "0.150"], 
  76.           [ "2023-12-04 10:15:07", "0.143"], 
  77.           [ "2023-12-04 10:20:07", "0.133"],
  78.           [ "2023-12-04 10:25:07", "0.147"], 
  79.           [ "2023-12-04 10:30:07", "0.147"],
  80.           [ "2023-12-04 10:35:07", "0.143"],
  81.           [ "2023-12-04 10:40:07", "0.140"], 
  82.           [ "2023-12-04 10:45:07", "0.150"], 
  83.           [ "2023-12-04 10:50:07", "0.143"],
  84.         ], 
  85.         "unit": "%", 
  86.         "markPoint": { 
  87.           "symbol": "rect",
  88.           "symbolSize": "12",
  89.           "label": { "show": false },
  90.           "tooltip": { "triggerOn": "click", "trigger": "item" }, 
  91.         }
  92.       },
  93.       { 
  94.         "name": "短信", 
  95.         "type": "line", 
  96.         "symbol": "rect", 
  97.         "connectNulls": true, 
  98.         "showAllSymbol": true, 
  99.           "data": [ 
  100.             [ "2023-12-04 10:35:07", "0.123"],
  101.             [ "2023-12-04 10:40:07", "0.140"], 
  102.             [ "2023-12-04 10:45:07", "0.150"], 
  103.             [ "2023-12-04 10:50:07", "0.143"],
  104.           ], 
  105.           "unit": "%", 
  106.           "markPoint": { 
  107.             "symbol": "circle",
  108.             "symbolSize": "12", 
  109.             "label": { "show": false } 
  110.           } 
  111.       } 
  112.     ]
  113.   };
  114.   myChart.setOption(option);
  115. </script>
  116. </html>

成功了吗？多条折线拥有数据自己的时间

  1. 根据上面的图片，我们发现。
  2. 好像确实是每一条折线都拥有数据自己的时间了。
  3. 但是如果你只细看的话。你就会发现端倪
  4. 结束时间都是一样的，但是折线却是在不同的时间上结束的。
  5. 很明显不正确的。

多条折线他们必须有一样的开始时间和结束时间？

  1. 上面我们发现了问题：结束时间都是一样的，但是折线却是在不同的时间上结束的。
  2. 有的机智的小伙伴可能会说：
  3. 是因为：多条折线他们必须有一样的开始时间和结束时间。
  4. 这样echarts在渲染的时候就不会出现上面这样的情况。
  5. 需要有相同的起始点和结束点
  6. 感觉有点道理，我们尝试一下
  1.  series: [
  2.   { 
  3.     "name": "邮件", 
  4.     "data": [ 
  5.       [ "2023-12-04 09:50:07", "0.137"],
  6.       [ "2023-12-04 09:55:07", "0.147"],
  7.       [ "2023-12-04 10:00:07", "0.137"],
  8.       [ "2023-12-04 10:05:07", "0.163"],
  9.       [ "2023-12-04 10:10:07", "0.150"], 
  10.       [ "2023-12-04 10:15:07", "0.143"], 
  11.       [ "2023-12-04 10:20:07", "0.133"],
  12.       [ "2023-12-04 10:25:07", "0.147"], 
  13.       [ "2023-12-04 10:30:07", "0.147"],
  14.       [ "2023-12-04 10:35:07", "0.143"],
  15.       [ "2023-12-04 10:40:07", "0.140"], 
  16.       [ "2023-12-04 10:45:07", "0.150"], 
  17.       [ "2023-12-04 10:50:07", "0.143"],
  18.     ], 
  19.   },
  20.   { 
  21.     "name": "短信", 
  22.     "data": [ 
  23.       [ "2023-12-04 09:50:07", "0.8"],
  24.       [ "2023-12-04 10:40:07", "0.140"], 
  25.       [ "2023-12-04 10:45:07", "0.150"], 
  26.       [ "2023-12-04 10:50:07", "0.143"],
  27.     ], 
  28.   } 
  29. ]
  30. 现在都有相同的起始点(2023-12-04 09:50:07)和结束点(2023-12-04 10:50:07)。

如果每条折线的时间都没有交集会怎么样?

  1. 我们发现只要有相同的起始点和结束点；
  2. 就会可以达到我们的预期效果。
  3. 此时，有的小伙伴说:
  4. "如果他们的时间如果没有交集会怎么样(有相同的起始点和结束点)"
  5. "data": [ 
  6.   [ "2023-12-04 09:50:07", "0.137"],
  7.   [ "2023-12-04 09:55:07", "0.147"],
  8.   [ "2023-12-04 10:00:07", "0.137"],
  9.   [ "2023-12-04 10:05:07", "0.163"],
  10.   [ "2023-12-04 10:10:07", "0.150"], 
  11.   [ "2023-12-04 10:15:07", "0.143"], 
  12.   [ "2023-12-04 10:20:07", "0.133"],
  13.   [ "2023-12-04 10:25:07", "0.147"], 
  14.   [ "2023-12-04 10:30:07", "0.147"],
  15.   [ "2023-12-04 10:35:07", "0.143"],
  16.   [ "2023-12-04 10:40:07", "0.140"], 
  17.   [ "2023-12-04 10:45:07", "0.150"], 
  18.   [ "2023-12-04 10:50:07", "0.143"],
  19. ], 
  21. "data": [ 
  22.   [ "2023-12-04 09:50:07", "0.8"],
  23.   [ "2023-12-04 09:52:07", "1.23"],
  24.   [ "2023-12-04 10:41:07", "0.140"], 
  25.   [ "2023-12-04 10:49:07", "0.150"], 
  26.   [ "2023-12-04 10:50:07", "0.143"],
  27. ],

xAxis 的 type值设置time

  1. 时间绘制的折线图不对，怎么会有返回去的折线？
  2. 怎么去解决这个问题呢？
  3. 有些小伙伴又提出了。我们可以将 xAxis 的 type值设置time。
  4. 就可以解决这个问题。

在 ECharts 中，type的值是 time 和 category 的区别

  1. 1.数据类型：'time' 表示时间类型的数据，适用于连续的时序数据。
  2. 通常返回的是时间戳。我们为了方便这里写的是yyyy-mm-dd hh:mm:ss
  3. 而 'category' 表示类目类型的数据，适用于离散的类目数据。
  5. 2.显示方式：在 'time' 类型下，
  6. ECharts 会根据时间跨度自动切换显示的时间粒度，例如从月、星期、日到小时等。
  7. 而在 'category' 类型下，坐标轴只会显示类目列表，并且坐标轴内仅包含这些指定类目的坐标。

时间格式又不对

  1. 有眼尖的小伙伴发现了一个小问题。
  2. 我们给的时间是 yyyy-mm-dd hh:mm:ss的格式
  3. 但是刚刚发现展示的是 hh:ss mm-dd
  4. 格式和我们预期的不符合

xAxis 配置项 axisLabel下的formatter 转换时间格式

  1. 通过查询echarts的文档。
  2. 我们发现 xAxis.axisLabel.formatter 可以做到对格式进行转换。
  3. formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 
  5. 对于时间轴（type: 'time'），formatter 的字符串模板支持3种形式：
  6. 1.字符串模板：简单快速实现常用日期时间模板，string 类型
  7. 2.回调函数：自定义 formatter，可以用来实现复杂高级的格式，Function 类型
  8. 3.分级模板：为不同时间粒度的标签使用不同的 formatter，object 类型
  9. 我发现使用 字符串模板 模板是不行的。分级模板没有试过。
  10. 官网推荐使用字符串模板，如果可以使用成功。
  11. 我们就不需要在写一个方法进行转化了。
  12. 但是很遗憾，失败了。可能是用的方式错误吧

字符串模板是失败的

字符串模板是失败的原因

  1. 本来我已经失望了。
  2. 结果小脑袋灵光一闪，猜测有没有可能是版本的原因。
  3. 我果断去切换到5的版本
  4. <script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
  5. 果然字符串模板显示正常了
  6. 模板字符串的详细使用地址是：https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter

字符串模板转化时间格式【推荐】

  1.  xAxis: {
  2.   // xAxis的下不在设置data属性共享时间`
  3.   type: 'time',
  4.   splitLine: { show: false },
  5.   lineStyle: {
  6.     width: 2
  7.   },
  8.   axisTick: {
  9.     show: false
  10.   },
  11.   axisLabel:{
  12.     // 更改x轴文字颜色的配置
  13.     textStyle: {
  14.       color: '#717782'
  15.     },
  16.     // 设置坐标轴上的时间格式 --使用的是模板字符串
  17.     // formatter: "{yyyy}-{MM}-{dd}", 得到的 label 形如：'2020-12-02'
  18.     formatter: '{yyyy}-{MM}-{dd} \n{HH}:{mm}:{ss}',
  20.     showMinLabel: true,
  21.     showMaxLabel: true // 固定显示X轴的最后一条数据
  22.   },
  23.   // 更改x轴线的颜色
  24.   axisLine: {
  25.     lineStyle: {
  26.       color: '#D2DBE6;',
  27.       width: 1 // x轴线的宽度
  28.     }
  29.   },
  30. },

使用回调函数转化时间格式

  1. function backTime(value){
  2.   let date = new Date(value);  
  3.   // 获取年份、月份和日期  
  4.   let year = date.getFullYear();  
  5.   let month = date.getMonth() + 1; // 月份从 0 开始，需要加 1  
  6.   let day = date.getDate();  
  8.   let hours = date.getHours();  
  9.   let minutes = date.getMinutes();  
  10.   let seconds = date.getSeconds(); 
  11.     
  12.   // 格式化月份和日期为两位数（不足两位时补零）  
  13.   month = month < 10 ? '0' + month : month;  
  14.   day = day < 10 ? '0' + day : day;  
  16.   hours = hours < 10 ? '0' + hours : hours;  
  17.   minutes = minutes < 10 ? '0' + minutes : minutes;  
  18.   seconds = seconds < 10 ? '0' + seconds : seconds;  
  19.   
  20.   // 返回格式化后的字符串  
  21.   return year + '-' + month + '-' + day + ' ' +
  22.          hours + ':' + minutes + ':' + seconds;
  23. }
  25. xAxis: {
  26.   // xAxis的下不在设置data属性共享时间
  27.   type: 'time',
  28.   splitLine: { show: false },
  29.   lineStyle: {
  30.     width: 2
  31.   },
  32.   axisTick: {
  33.     show: false
  34.   },
  35.   axisLabel:{
  36.     // 更改x轴文字颜色的配置
  37.     textStyle: {
  38.       color: '#717782'
  39.     },
  40.     // 设置坐标轴上的时间格式
  41.     formatter: function (value) {  
  42.       console.log('时间戳',value )
  43.       // 将时间转换为 我们需要的格式 ，这里的value是一个时间戳
  44.       return backTime(value)
  45.     },
  46.     showMinLabel: true,
  47.     showMaxLabel: true // 固定显示X轴的最后一条数据
  48.   },
  49.   // 更改x轴线的颜色
  50.   axisLine: {
  51.     lineStyle: {
  52.       color: '#D2DBE6;',
  53.       width: 1 // x轴线的宽度
  54.     }
  55.   },
  56. },
  1. 特别提醒： type: 'time'的时候，
  2. formatter : function (value) { }
  3. 中的value是一个时间戳

更改tooltip的时间格式

  1. tooltip: {
  2.   trigger: 'axis',
  3.   formatter: (c) => {
  4.     let str = ''
  5.     let temp = {
  6.       showTime: '', // 时间
  7.       marker: '', // 颜色
  8.       seriesName: '', // legend名称
  9.       valueData: '', // 数值
  10.       setWidthSpan: '',
  11.     }
  12.     c.forEach((item) => {
  13.       temp.showTime = item.data[0]
  14.       temp.marker = item.marker
  15.       temp.seriesName = item.seriesName 
  16.       temp.valueData = item.value[1] 
  17.       temp.setWidthSpan = '<span style="display:inline-block;width:10px;height:10px;"></span>'
  18.       str += temp.marker + temp.seriesName + temp.setWidthSpan + temp.valueData + '<br />'
  19.     })
  20.     return temp.showTime + '<br />' + str
  21.   },
  22. },

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>多条折线图</title>
  7.   <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  8. </head>
  10. <body>
  11.   <div style="width: 900px;height: 400px;"></div>
  12. </body>
  13. <script>
  15.   function backTime(value){
  16.     let date = new Date(value);  
  17.     // 获取年份、月份和日期  
  18.     let year = date.getFullYear();  
  19.     let month = date.getMonth() + 1; // 月份从 0 开始，需要加 1  
  20.     let day = date.getDate();  
  22.     let hours = date.getHours();  
  23.     let minutes = date.getMinutes();  
  24.     let seconds = date.getSeconds(); 
  25.       
  26.     // 格式化月份和日期为两位数（不足两位时补零）  
  27.     month = month < 10 ? '0' + month : month;  
  28.     day = day < 10 ? '0' + day : day;  
  30.     hours = hours < 10 ? '0' + hours : hours;  
  31.     minutes = minutes < 10 ? '0' + minutes : minutes;  
  32.     seconds = seconds < 10 ? '0' + seconds : seconds;  
  33.     
  34.     // 返回格式化后的字符串  
  35.     return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
  36.   }
  37.   let myChart = echarts.init(document.querySelector('div'))
  38.   let option = {
  39.     // 设置的是标题
  40.     title: {
  41.       text: '折线图'
  42.     },
  43.     tooltip: {
  44.       trigger: 'axis',
  45.       formatter: (c) => {
  46.         let str = ''
  47.         let temp = {
  48.           showTime: '', // 时间
  49.           marker: '', // 颜色
  50.           seriesName: '', // legend名称
  51.           valueData: '', // 数值
  52.           setWidthSpan: '',
  53.         }
  54.         c.forEach((item) => {
  55.           temp.showTime = item.data[0]
  56.           temp.marker = item.marker
  57.           temp.seriesName = item.seriesName 
  58.           temp.valueData = item.value[1] 
  59.           temp.setWidthSpan = '<span style="display:inline-block;width:10px;height:10px;"></span>'
  60.           str += temp.marker + temp.seriesName + temp.setWidthSpan + temp.valueData + '<br />'
  61.         })
  62.         return temp.showTime + '<br />' + str
  63.       },
  64.     },
  65.     legend: {
  66.       data: ['邮件', '短信']
  67.     },
  68.     // 网格间距设置
  69.     grid: {
  70.       left: '30px',
  71.       right: '60px',
  72.       bottom: '3%',
  73.       containLabel: true
  74.     },
  75.     xAxis: {
  76.       // xAxis的下不在设置data属性共享时间`
  77.       type: 'time',
  78.       splitLine: { show: false },
  79.       lineStyle: {
  80.         width: 2
  81.       },
  82.       axisTick: {
  83.         show: false
  84.       },
  85.       axisLabel:{
  86.         // 更改x轴文字颜色的配置
  87.         textStyle: {
  88.           color: '#717782'
  89.         },
  90.         // 设置坐标轴上的时间格式
  91.         formatter: function (value) {  
  92.           console.log('时间戳',value )
  93.           // 将时间转换为 JavaScript 日期对象  
  94.           return backTime(value)
  95.         },
  96.         showMinLabel: true,
  97.         showMaxLabel: true // 固定显示X轴的最后一条数据
  98.       },
  99.       // 更改x轴线的颜色
  100.       axisLine: {
  101.         lineStyle: {
  102.           color: '#D2DBE6;',
  103.           width: 1 // x轴线的宽度
  104.         }
  105.       },
  106.     },
  107.     yAxis: {
  108.       type: 'value'
  109.     },
  110.     // 数据
  111.     series: [
  112.       { 
  113.         "name": "邮件", 
  114.         "type": "line", 
  115.         "symbol": "rect",
  116.         "connectNulls": true,
  117.         "showAllSymbol": true, 
  118.         // 让每一条折线拥有数据自己的时间
  119.         "data": [ 
  120.           [ "2023-12-04 09:50:07", "0.137"],
  121.           [ "2023-12-04 09:55:07", "0.147"],
  122.           [ "2023-12-04 10:00:07", "0.137"],
  123.           [ "2023-12-04 10:05:07", "0.163"],
  124.           [ "2023-12-04 10:10:07", "0.150"], 
  125.           [ "2023-12-04 10:15:07", "0.143"], 
  126.           [ "2023-12-04 10:20:07", "0.133"],
  127.           [ "2023-12-04 10:25:07", "0.147"], 
  128.           [ "2023-12-04 10:30:07", "0.147"],
  129.           [ "2023-12-04 10:35:07", "0.143"],
  130.           [ "2023-12-04 10:40:07", "0.140"], 
  131.           [ "2023-12-04 10:45:07", "0.150"], 
  132.           [ "2023-12-04 10:50:07", "0.143"],
  133.         ], 
  134.         "unit": "%", 
  135.         "markPoint": { 
  136.           "symbol": "rect",
  137.           "symbolSize": "12",
  138.           "label": { "show": false },
  139.           "tooltip": { "triggerOn": "click", "trigger": "item" }, 
  140.         }
  141.       },
  142.       { 
  143.         "name": "短信", 
  144.         "type": "line", 
  145.         "symbol": "rect", 
  146.         "connectNulls": true, 
  147.         "showAllSymbol": true, 
  148.           "data": [ 
  149.             [ "2023-12-04 09:50:07", "0.8"],
  150.             [ "2023-12-04 09:52:07", "1.23"],
  151.             [ "2023-12-04 10:41:07", "0.140"], 
  152.             [ "2023-12-04 10:42:07", "0.140"], 
  153.             [ "2023-12-04 10:45:07", "0.140"], 
  154.             [ "2023-12-04 10:49:07", "0.150"], 
  155.             [ "2023-12-04 10:50:07", "0.143"],
  156.           ], 
  157.           "unit": "%", 
  158.           "markPoint": { 
  159.             "symbol": "circle",
  160.             "symbolSize": "12", 
  161.             "label": { "show": false } 
  162.           } 
  163.       } 
  164.     ]
  165.   };
  166.   myChart.setOption(option);
  167. </script>
  168. </html>

原文链接：https://www.cnblogs.com/IwishIcould/p/17900950.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Echarts热门文章

  • Python+Pyecharts实现散点图的绘制
  • vue+echarts5实现中国地图的示例代码
  • echarts中几种渐变方式的具体实现方式
  • Echart Bar双柱状图样式最全详解
  • vue echarts实现柱状图动态展示
  • 如何利用echarts画雷达图和折柱混合
  • Echarts Bar横向柱状图实例代码
  • ECharts图表动态修改series显示隐藏
  • 【Dotnet 工具箱】跨平台图表库 LiveCharts2
  • vue2?利用echarts?单独绘制省份的步骤

    • Echarts推荐文章

  • Echarts设置饼状图保证你看的明明白白
  • .NET开源、功能强大、跨平台的图表库 - LiveCharts2
  • echarts X轴类目名太长时隐藏，hover时显示全部
  • vue3+ts打开echarts的正确方式
  • echarts设置多条折线不是你想的那样简单
  • 将ECharts图表插入到Word文档中
  • echarts中几种渐变方式的具体实现方式
  • vue中echarts关系图动态增删节点以及连线方式
  • 如何利用echarts画雷达图和折柱混合
  • pyecharts的Tab和Legend布局详情

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号