测试Demo代码~~

  1. <template>
  2.   <div>
  3.     <div id="myChart" ref="mapBox" style="width: 100%; height: 400px"></div>
  4.   </div>
  5. </template>
  6. <script>
  7. import echarts from 'echarts'
  8. import chartMock from '../co-assets/chart-mock.js'
  9. const myOption = {
  10.   title: {
  11.     text: '折线图堆叠'
  12.   },
  13.   tooltip: {
  14.     trigger: 'axis'
  15.   },
  16.   legend: {
  17.     data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
  18.   },
  19.   grid: {
  20.     left: '3%',
  21.     right: '4%',
  22.     bottom: '3%',
  23.     containLabel: true
  24.   },
  25.   toolbox: {
  26.     feature: {
  27.       saveAsImage: {}
  28.     }
  29.   },
  30.   xAxis: {
  31.     type: 'category',
  32.     boundaryGap: false,
  33.     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  34.   },
  35.   yAxis: {
  36.     type: 'value'
  37.   },
  38.   series: [
  39.     {
  40.       name: '1',
  41.       type: 'line',
  42.       stack: '总量',
  43.       data: [120, 132, 101, 134, 90, 230, 210]
  44.     },
  45.     {
  46.       name: '2',
  47.       type: 'line',
  48.       stack: '总量',
  49.       data: [220, 182, 191, 234, 290, 330, 310]
  50.     },
  51.     {
  52.       name: '3',
  53.       type: 'line',
  54.       stack: '总量',
  55.       data: [150, 232, 201, 154, 190, 330, 410]
  56.     },
  57.     {
  58.       name: '4',
  59.       type: 'line',
  60.       stack: '总量',
  61.       data: [320, 332, 301, 334, 390, 330, 320]
  62.     },
  63.     {
  64.       name: '5',
  65.       type: 'line',
  66.       stack: '总量',
  67.       data: [820, 932, 901, 934, 1290, 1330, 1320]
  68.     },
  69.     {
  70.       name: '6',
  71.       type: 'line',
  72.       stack: '总量',
  73.       data: [920, 1032, 1101, 1134, 1390, 1430, 1420]
  74.     },
  75.     {
  76.       name: '7',
  77.       type: 'line',
  78.       stack: '总量',
  79.       data: [1020, 1132, 1201, 1234, 1490, 1430, 1520]
  80.     },
  81.     {
  82.       name: '8',
  83.       type: 'line',
  84.       stack: '总量',
  85.       data: [1220, 1332, 1301, 1334, 1590, 1530, 1620]
  86.     },
  87.     {
  88.       name: '9',
  89.       type: 'line',
  90.       stack: '总量',
  91.       data: [1320, 1432, 1801, 1834, 1890, 1830, 1820]
  92.     },
  93.     {
  94.       name: '10',
  95.       type: 'line',
  96.       stack: '总量',
  97.       data: [2220, 2232, 3201, 3334, 3490, 3530, 3620]
  98.     },
  99.     {
  100.       name: '11',
  101.       type: 'line',
  102.       stack: '总量',
  103.       data: [2420, 2432, 3401, 3434, 3790, 3730, 3820]
  104.     },
  105.     {
  106.       name: '12',
  107.       type: 'line',
  108.       stack: '总量',
  109.       data: [3220, 3232, 4201, 4334, 4490, 5530, 5620]
  110.     }
  111.   ]
  112. }
  113. export default {
  114.   data() {
  115.     return {}
  116.   },
  117.   mounted() {
  118.     this.myChart = echarts.init(this.$refs.mapBox)
  119.     this.setChartOnion()
  120.     window.addEventListener('resize', this.resizeTheChart)
  121.   },
  122.   methods: {
  123.     resizeTheChart() {
  124.       // console.log("縮放執行中~~~");
  125.       if (this.$refs && this.$refs.mapBox) {
  126.         const myChartNode = document.getElementById('myChart')
  127.         if (myChartNode) {
  128.           myChartNode.style.height = myChartNode.offsetWidth * 0.5 + 'px'
  129.         }
  130.  
  131.         this.myChart.resize()
  132.       }
  133.     },
  134.     setChartOnion() {
  135.       myOption.series.forEach((item, i) => {
  136.         item.areaStyle = { color: {} }
  137.         item.itemStyle = { color: {} }
  138.         // item = {
  139.         //   name: item.name,
  140.         //   type: 'line',
  141.         //   symbol: 'none',
  142.         //   // symbol:'circle', // 折线点设定为实心点
  143.         //   // symbolSize: 9, // 设定折线点的大小
  144.         //   // smooth: true, //折点是圆弧状的
  145.         //   // showSymbol: true,
  146.         //   // symbol: "circle", //折点设定为实心点
  147.         //   // symbolSize: 20,
  148.         //   stack: item.stack,
  149.         //   data: item.data,
  150.         //   itemStyle: { color: {} },
  151.         //   areaStyle: { color: {} },
  152.         //   lineStyle: {}
  153.         // }
  154.         // 設置折線圖顏色
  155.         if (chartMock.itemStyleArr[i]) {
  156.           item.itemStyle = chartMock.itemStyleArr[i].lineStyle
  157.           item.areaStyle.color = chartMock.itemStyleArr[i]['color']
  158.         }
  159.       })
  160.       this.myChart.setOption(myOption)
  161.     }
  162.   }
  163. }
  164. </script>
  1. export default {
  2.  
  3.   itemStyleArr: [
  4.     {
  5.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  6.       color: {
  7.         type: 'linear',
  8.         x: 0,
  9.         y: 0,
  10.         x2: 0,
  11.         y2: 1,
  12.         colorStops: [
  13.           {
  14.             offset: 0,
  15.             color: '#d7f4f8' // 0% 处的颜色
  16.           },
  17.           {
  18.             offset: 0.5,
  19.             color: '#b8eff7' // 100% 处的颜色
  20.           },
  21.           {
  22.             offset: 1,
  23.             color: '#fff' // 100% 处的颜色
  24.           }
  25.         ],
  26.         global: false // 缺省为 false
  27.       }, // 背景渐变色
  28.       lineStyle: {
  29.         normal: {
  30.           color: '#4fd6d2', // 图例的颜色
  31.           lineStyle: {
  32.             // 系列级个性化折线样式
  33.             width: 2,
  34.             type: 'solid',
  35.             color: '#4fd6d2'
  36.           }
  37.         }
  38.       },
  39.       emphasis: {
  40.         color: '#4fd6d2',
  41.         lineStyle: {
  42.           // 系列级个性化折线样式
  43.           width: 2,
  44.           type: 'dotted',
  45.           color: '#4fd6d2' // 折线的颜色
  46.         }
  47.       }
  48.     }, // 线条样式1
  49.     {
  50.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  51.       color: {
  52.         type: 'linear',
  53.         x: 0,
  54.         y: 0,
  55.         x2: 0,
  56.         y2: 1,
  57.         colorStops: [
  58.           {
  59.             offset: 0,
  60.             color: '#81befd' // 0% 处的颜色
  61.           },
  62.           {
  63.             offset: 0.4,
  64.             color: '#bad7f5' // 100% 处的颜色
  65.           },
  66.           {
  67.             offset: 1,
  68.             color: '#fff' // 100% 处的颜色
  69.           }
  70.         ],
  71.         global: false // 缺省为 false
  72.       }, // 背景渐变色
  73.       lineStyle: {
  74.         normal: {
  75.           color: '#0180ff', // 图例的颜色
  76.           lineStyle: {
  77.             // 系列级个性化折线样式
  78.             width: 2,
  79.             type: 'solid',
  80.             color: '#0180ff'
  81.           }
  82.         }
  83.       },
  84.       emphasis: {
  85.         color: '#0180ff',
  86.         lineStyle: {
  87.           // 系列级个性化折线样式
  88.           width: 2,
  89.           type: 'dotted',
  90.           color: '0180ff'
  91.         }
  92.       }
  93.     }, // 线条样式2
  94.     {
  95.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  96.       color: {
  97.         type: 'linear',
  98.         x: 0,
  99.         y: 0,
  100.         x2: 0,
  101.         y2: 1,
  102.         colorStops: [
  103.           {
  104.             offset: 0,
  105.             color: '#b581fd' // 0% 处的颜色
  106.           },
  107.           {
  108.             offset: 0.4,
  109.             color: '#f9e4ff' // 40% 处的颜色
  110.           },
  111.           {
  112.             offset: 1,
  113.             color: '#fff' // 100% 处的颜色
  114.           }
  115.         ],
  116.         global: false // 缺省为 false
  117.       }, // 背景渐变色
  118.       lineStyle: {
  119.         normal: {
  120.           color: '#b581fd', // 图例的颜色
  121.           lineStyle: {
  122.             // 系列级个性化折线样式
  123.             width: 2,
  124.             type: 'solid',
  125.             color: '#b581fd'
  126.           }
  127.         }
  128.       },
  129.       emphasis: {
  130.         color: 'red',
  131.         lineStyle: {
  132.           // 系列级个性化折线样式
  133.           width: 1,
  134.           type: 'dotted',
  135.           color: 'red'
  136.         }
  137.       }
  138.     }, // 线条样式3
  139.     {
  140.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  141.       color: {
  142.         type: 'linear',
  143.         x: 0,
  144.         y: 0,
  145.         x2: 0,
  146.         y2: 1,
  147.         colorStops: [
  148.           {
  149.             offset: 0,
  150.             color: '#6699FF' // 0% 处的颜色
  151.           },
  152.           {
  153.             offset: 0.4,
  154.             color: '#9ebbf5' // 100% 处的颜色
  155.           },
  156.           {
  157.             offset: 1,
  158.             color: '#fff' // 100% 处的颜色
  159.           }
  160.         ],
  161.         global: false // 缺省为 false
  162.       }, // 背景渐变色
  163.       lineStyle: {
  164.         normal: {
  165.           color: '#6699FF', // 图例的颜色
  166.           lineStyle: {
  167.             // 系列级个性化折线样式
  168.             width: 2,
  169.             type: 'solid',
  170.             color: '#6699FF'
  171.           }
  172.         }
  173.       },
  174.       emphasis: {
  175.         color: '#6699FF',
  176.         lineStyle: {
  177.           // 系列级个性化折线样式
  178.           width: 1,
  179.           type: 'dotted',
  180.           color: '#6699FF'
  181.         }
  182.       }
  183.     }, // 线条样式4
  184.     {
  185.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  186.       color: {
  187.         type: 'linear',
  188.         x: 0,
  189.         y: 0,
  190.         x2: 0,
  191.         y2: 1,
  192.         colorStops: [
  193.           {
  194.             offset: 0,
  195.             color: '#FF99FF' // 0% 处的颜色
  196.           },
  197.           {
  198.             offset: 0.4,
  199.             color: '#f7d2f7' // 100% 处的颜色
  200.           },
  201.           {
  202.             offset: 1,
  203.             color: '#fff' // 100% 处的颜色
  204.           }
  205.         ],
  206.         global: false // 缺省为 false
  207.       }, // 背景渐变色
  208.       lineStyle: {
  209.         normal: {
  210.           color: '#FF99FF', // 图例的颜色
  211.           lineStyle: {
  212.             // 系列级个性化折线样式
  213.             width: 2,
  214.             type: 'solid',
  215.             color: '#FF99FF'
  216.           }
  217.         }
  218.       },
  219.       emphasis: {
  220.         color: '#FF99FF',
  221.         lineStyle: {
  222.           // 系列级个性化折线样式
  223.           width: 1,
  224.           type: 'dotted',
  225.           color: '#FF99FF'
  226.         }
  227.       }
  228.     }, // 线条样式5
  229.     {
  230.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  231.       color: {
  232.         type: 'linear',
  233.         x: 0,
  234.         y: 0,
  235.         x2: 0,
  236.         y2: 1,
  237.         colorStops: [
  238.           {
  239.             offset: 0,
  240.             color: '#2d2df7' // 0% 处的颜色
  241.           },
  242.           {
  243.             offset: 0.4,
  244.             color: '#9898f7' // 100% 处的颜色
  245.           },
  246.           {
  247.             offset: 1,
  248.             color: '#fff' // 100% 处的颜色
  249.           }
  250.         ],
  251.         global: false // 缺省为 false
  252.       }, // 背景渐变色
  253.       lineStyle: {
  254.         normal: {
  255.           color: '#2d2df7', // 图例的颜色
  256.           lineStyle: {
  257.             // 系列级个性化折线样式
  258.             width: 2,
  259.             type: 'solid',
  260.             color: '#2d2df7'
  261.           }
  262.         }
  263.       },
  264.       emphasis: {
  265.         color: '#2d2df7',
  266.         lineStyle: {
  267.           // 系列级个性化折线样式
  268.           width: 1,
  269.           type: 'dotted',
  270.           color: '#2d2df7'
  271.         }
  272.       }
  273.     }, // 线条样式6
  274.     {
  275.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  276.       color: {
  277.         type: 'linear',
  278.         x: 0,
  279.         y: 0,
  280.         x2: 0,
  281.         y2: 1,
  282.         colorStops: [
  283.           {
  284.             offset: 0,
  285.             color: '#7a4ffb' // 0% 处的颜色
  286.           },
  287.           {
  288.             offset: 0.4,
  289.             color: '#beacf5' // 100% 处的颜色
  290.           },
  291.           {
  292.             offset: 1,
  293.             color: '#fff' // 100% 处的颜色
  294.           }
  295.         ],
  296.         global: false // 缺省为 false
  297.       }, // 背景渐变色
  298.       lineStyle: {
  299.         normal: {
  300.           color: '#7a4ffb', // 图例的颜色
  301.           lineStyle: {
  302.             // 系列级个性化折线样式
  303.             width: 2,
  304.             type: 'solid',
  305.             color: '#7a4ffb'
  306.           }
  307.         }
  308.       },
  309.       emphasis: {
  310.         color: '#7a4ffb',
  311.         lineStyle: {
  312.           // 系列级个性化折线样式
  313.           width: 1,
  314.           type: 'dotted',
  315.           color: '#7a4ffb'
  316.         }
  317.       }
  318.     }, // 线条样式7
  319.     {
  320.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  321.       color: {
  322.         type: 'linear',
  323.         x: 0,
  324.         y: 0,
  325.         x2: 0,
  326.         y2: 1,
  327.         colorStops: [
  328.           {
  329.             offset: 0,
  330.             color: '#cc3399' // 0% 处的颜色
  331.           },
  332.           {
  333.             offset: 0.4,
  334.             color: '#d08cb9' // 100% 处的颜色
  335.           },
  336.           {
  337.             offset: 1,
  338.             color: '#fff' // 100% 处的颜色
  339.           }
  340.         ],
  341.         global: false // 缺省为 false
  342.       }, // 背景渐变色
  343.       lineStyle: {
  344.         normal: {
  345.           color: '#cc3399', // 图例的颜色
  346.           lineStyle: {
  347.             // 系列级个性化折线样式
  348.             width: 2,
  349.             type: 'solid',
  350.             color: '#cc3399'
  351.           }
  352.         }
  353.       },
  354.       emphasis: {
  355.         color: '#cc3399',
  356.         lineStyle: {
  357.           // 系列级个性化折线样式
  358.           width: 1,
  359.           type: 'dotted',
  360.           color: '#cc3399'
  361.         }
  362.       }
  363.     }, // 线条样式8
  364.     {
  365.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  366.       color: {
  367.         type: 'linear',
  368.         x: 0,
  369.         y: 0,
  370.         x2: 0,
  371.         y2: 1,
  372.         colorStops: [
  373.           {
  374.             offset: 0,
  375.             color: '#ce3df3' // 0% 处的颜色
  376.           },
  377.           {
  378.             offset: 0.4,
  379.             color: '#df9cf1' // 100% 处的颜色
  380.           },
  381.           {
  382.             offset: 1,
  383.             color: '#fff' // 100% 处的颜色
  384.           }
  385.         ],
  386.         global: false // 缺省为 false
  387.       }, // 背景渐变色
  388.       lineStyle: {
  389.         normal: {
  390.           color: '#ce3df3', // 图例的颜色
  391.           lineStyle: {
  392.             // 系列级个性化折线样式
  393.             width: 2,
  394.             type: 'solid',
  395.             color: '#ce3df3'
  396.           }
  397.         }
  398.       },
  399.       emphasis: {
  400.         color: '#ce3df3',
  401.         lineStyle: {
  402.           // 系列级个性化折线样式
  403.           width: 1,
  404.           type: 'dotted',
  405.           color: '#ce3df3'
  406.         }
  407.       }
  408.     }, // 线条样式9
  409.     {
  410.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  411.       color: {
  412.         type: 'linear',
  413.         x: 0,
  414.         y: 0,
  415.         x2: 0,
  416.         y2: 1,
  417.         colorStops: [
  418.           {
  419.             offset: 0,
  420.             color: '#ff6666' // 0% 处的颜色
  421.           },
  422.           {
  423.             offset: 0.4,
  424.             color: '#f3a0a0' // 100% 处的颜色
  425.           },
  426.           {
  427.             offset: 1,
  428.             color: '#fff' // 100% 处的颜色
  429.           }
  430.         ],
  431.         global: false // 缺省为 false
  432.       }, // 背景渐变色
  433.       lineStyle: {
  434.         normal: {
  435.           color: '#ff6666', // 图例的颜色
  436.           lineStyle: {
  437.             // 系列级个性化折线样式
  438.             width: 2,
  439.             type: 'solid',
  440.             color: '#ff6666'
  441.           }
  442.         }
  443.       },
  444.       emphasis: {
  445.         color: '#ff6666',
  446.         lineStyle: {
  447.           // 系列级个性化折线样式
  448.           width: 1,
  449.           type: 'dotted',
  450.           color: '#ff6666'
  451.         }
  452.       }
  453.     }, // 线条样式10
  454.     {
  455.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  456.       color: {
  457.         type: 'linear',
  458.         x: 0,
  459.         y: 0,
  460.         x2: 0,
  461.         y2: 1,
  462.         colorStops: [
  463.           {
  464.             offset: 0,
  465.             color: '#f7aa37' // 0% 处的颜色
  466.           },
  467.           {
  468.             offset: 0.4,
  469.             color: '#f1bf75' // 100% 处的颜色
  470.           },
  471.           {
  472.             offset: 1,
  473.             color: '#fff' // 100% 处的颜色
  474.           }
  475.         ],
  476.         global: false // 缺省为 false
  477.       }, // 背景渐变色
  478.       lineStyle: {
  479.         normal: {
  480.           color: '#f7aa37', // 图例的颜色
  481.           lineStyle: {
  482.             // 系列级个性化折线样式
  483.             width: 2,
  484.             type: 'solid',
  485.             color: '#f7aa37'
  486.           }
  487.         }
  488.       },
  489.       emphasis: {
  490.         color: '#f7aa37',
  491.         lineStyle: {
  492.           // 系列级个性化折线样式
  493.           width: 1,
  494.           type: 'dotted',
  495.           color: '#f7aa37'
  496.         }
  497.       }
  498.     }, // 线条样式11
  499.     {
  500.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  501.       color: {
  502.         type: 'linear',
  503.         x: 0,
  504.         y: 0,
  505.         x2: 0,
  506.         y2: 1,
  507.         colorStops: [
  508.           {
  509.             offset: 0,
  510.             color: '#ffcc33' // 0% 处的颜色
  511.           },
  512.           {
  513.             offset: 0.4,
  514.             color: '#f5d77e' // 100% 处的颜色
  515.           },
  516.           {
  517.             offset: 1,
  518.             color: '#fff' // 100% 处的颜色
  519.           }
  520.         ],
  521.         global: false // 缺省为 false
  522.       }, // 背景渐变色
  523.       lineStyle: {
  524.         normal: {
  525.           color: '#ffcc33', // 图例的颜色
  526.           lineStyle: {
  527.             // 系列级个性化折线样式
  528.             width: 2,
  529.             type: 'solid',
  530.             color: '#ffcc33'
  531.           }
  532.         }
  533.       },
  534.       emphasis: {
  535.         color: '#ffcc33',
  536.         lineStyle: {
  537.           // 系列级个性化折线样式
  538.           width: 1,
  539.           type: 'dotted',
  540.           color: '#ffcc33'
  541.         }
  542.       }
  543.     }, // 线条样式12
  544.     {
  545.       // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  546.       color: {
  547.         type: 'linear',
  548.         x: 0,
  549.         y: 0,
  550.         x2: 0,
  551.         y2: 1,
  552.         colorStops: [
  553.           {
  554.             offset: 0,
  555.             color: '#efef33' // 0% 处的颜色
  556.           },
  557.           {
  558.             offset: 0.4,
  559.             color: '#fbfb87' // 100% 处的颜色
  560.           },
  561.           {
  562.             offset: 1,
  563.             color: '#fff' // 100% 处的颜色
  564.           }
  565.         ],
  566.         global: false // 缺省为 false
  567.       }, // 背景渐变色
  568.       lineStyle: {
  569.         normal: {
  570.           color: '#efef33', // 图例的颜色
  571.           lineStyle: {
  572.             // 系列级个性化折线样式
  573.             width: 2,
  574.             type: 'solid',
  575.             color: '#efef33'
  576.           }
  577.         }
  578.       },
  579.       emphasis: {
  580.         color: '#efef33',
  581.         lineStyle: {
  582.           // 系列级个性化折线样式
  583.           width: 1,
  584.           type: 'dotted',
  585.           color: '#efef33'
  586.         }
  587.       }
  588.     } // 线条样式11
  589.   ]
  590. };

Echarts 折线图Demo调色12种，可以直接使用~~~的更多相关文章

  1. echarts折线图Demo

    echarts链接:http://echarts.baidu.com/examples/editor.html?c=line-stack 黑底代码:http://gallery.echartsjs.c ...

  2. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  3. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  4. echarts折线图动态改变数据时的一个bug

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  5. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  6. echarts折线图，数据切换时（最近七天）绘图不合理现象

    echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...

  7. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  8. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  9. 知识点4: 配置echarts折线图和饼图

    折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...

  10. echarts折线图相关

    optionJKDLine = { title: { text: '告警数量趋势图', textStyle:{ //标题样式 fontStyle:'normal', fontFamily:'sans- ...

随机推荐

  1. 18.-cookies和session

    一.会话定义 从打开浏览器访问一个网站,到关闭浏览器结束此次访问,称之为一次绘画 HTTP协议是无状态的,导致绘画状态难以保持 Cookies和session就是为了保持会话状态而诞生的两个存储技术 ...

  2. .Net Core redis 调用报错 '6000 Redis requests per hour' 解决 6000 此调用限制

    问题描述 redis 是一种基于内存,性能高效的 NoSQL 数据库,性能高主要就体现在数据交互耗时较短,能够段时快速的对用户的请求做出反应,所以在业务比较复杂或交互量需求大时,必然会超过 6000次 ...

  3. Pthread 并发编程（一）——深入剖析线程基本元素和状态

    Pthread 并发编程(一)--深入剖析线程基本元素和状态 前言 在本篇文章当中讲主要给大家介绍 pthread 并发编程当中关于线程的基础概念,并且深入剖析进程的相关属性和设置,以及线程在内存当中 ...

  4. C#接口设计

    基本架构 model 实体 说得通俗一些,model中主要是定义前端传过来的变量以及其类型,或者是需要操作的数据库中的某些字段值.举个例子: namespace Test.Models.Book { ...

  5. Java开发学习(四十)----MyBatisPlus入门案例与简介

    一.入门案例 MybatisPlus(简称MP)是基于MyBatis框架基础上开发的增强型工具,旨在简化开发.提供效率. SpringBoot它能快速构建Spring开发环境用以整合其他技术,使用起来 ...

  6. .NET二叉树，递归和迭代遍历二叉树

    代码随想录: https://programmercarl.com .NET中二叉树的定义 public class TreeNode { public int val; public TreeNod ...

  7. ARMv8之memory model和Observability(四)

    最近在学习整理ARMv8的memory 相关知识,对memory的各种概念搞的头痛,太难读了!!有幸看看窝窝大神整理了部分知识,关键是讲解的地道,透彻.因此在这里学习并转载一下,也希望能够和大家一起探 ...

  8. mysql 多个结构不同表查询 返回相同字段名

    ( select ID,数据库原字段名1 AS 统一字段名1,数据库原字段名2 AS 统一字段名2 from 第一个表名 WHERE 1) UNION(联合表查询)( select ID,数据库原字段 ...

  9. 2流高手速成记（之九）：基于SpringCloudGateway实现服务网关功能

    咱们接上回 上一节我们基于Sentinel实现了微服务体系下的限流和熔断,使得整个微服务架构的安全性和稳定性上升了一个台阶 篇尾我们引出了一个问题,众多的微服务节点,我们如何部署才能满足客户端简洁高效 ...

  10. table 动态隐藏tr行

    table: <table style="width:100%" class="table01" cellspacing="1" ce ...