• echarts折线图设置背景颜色



    1. initChartsBox() {
    2. this.option = {
    3. tooltip: {
    4. trigger: "axis",
    5. axisPointer: {
    6. // 方法一
    7. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
    8. shadowStyle: {
    9. color: "rgba(41, 95, 204, 0.2)",
    10. },
    11. },
    12. borderColor: "rgba(0, 170, 255)", // 边框颜色
    13. }, // 坐标轴指示器配置
    14. textStyle: {
    15. color: "#333", // xy轴的提示文字颜色,不包含背景刻度线
    16. },
    17. color: ["#1492FF"],
    18. grid: {
    19. top: "25px",
    20. left: "50px",
    21. right: "20px",
    22. bottom: "35px",
    23. },
    24. xAxis: [
    25. {
    26. type: "category",
    27. data: this.chartsData.time,
    28. axisLine: {
    29. show: true,
    30. lineStyle: {
    31. color: "#004080",
    32. // width: 0,
    33. // type: "solid",
    34. }, // x轴线的颜色以及宽度
    35. },
    36. // axisLabel: {
    37. // show: true,
    38. // textStyle: {
    39. // color: "rgba(255, 255, 255, 0.3)",
    40. // }
    41. // }, // x轴文字的配置
    42. splitLine: {
    43. show: false,
    44. lineStyle: {}, // 分割线配置
    45. },
    46. axisTick: {
    47. show: false,
    48. }, // x轴的刻度线
    49. },
    50. ],
    51. yAxis: [
    52. {
    53. type: "value",
    54. splitLine: {
    55. show: true,
    56. lineStyle: {
    57. color: "#333",
    58. opacity: 0.1,
    59. }, // 设置横向的线的颜色
    60. },
    61. axisLabel: {
    62. show: true,
    63. margin: 20,
    64. // textStyle: {
    65. // color: "rgba(255, 255, 255, 0.3)",
    66. // }, // y轴的字体配置
    67. },
    68. splitArea: {
    69. show: true,
    70. areaStyle: {
    71. color: [
    72. 'rgba(21, 190, 80, 0.1)',
    73. 'rgba(109, 217, 147, 0.1)',
    74. 'rgba(245, 221, 102, 0.11)',
    75. 'rgba(255, 107, 0, 0.1)',
    76. 'rgba(212, 0, 0, 0.1)',
    77. ]
    78. }
    79. }
    80. },
    81. ],
    82. series: [
    83. {
    84. data: this.chartsData.roadNorm,
    85. type: "line",
    86. smooth: true,
    87. symbolSize: 0, // 设置圆点大小为 0,即不显示圆点
    88. },
    89. ],
    90. };
    91. this.myChart = this.$echarts.init(document.getElementById("chartsBox")); // 图标初始化
    92. this.myChart.setOption(this.option); // 渲染页面
    93. var that = this;
    94. let index = 0;
    95. this.eChartsTimer = setInterval(function () {
    96. let len = that.chartsData.time.length;
    97. if (index >= len) {
    98. index = 0;
    99. }
    100. that.myChart.dispatchAction({
    101. type: "showTip", // 提示框
    102. seriesIndex: 0,
    103. dataIndex: index, // 第 lightIndex 柱子高亮
    104. });
    105. index += 1
    106. }, 1000);
    107. /* ECharts动态效果 */
    108. window.addEventListener("resize", () => {
    109. this.myChart.resize();
    110. });
    111. },

  • 相关阅读:
    一段时间后,stop-dfs.sh关不掉Hadoop3.1.3集群,stop-hbase.sh关不掉HBase集群
    Dash 2.14版本开始支持动态回调注册!
    一种基于超像素和生成对抗网络的视网膜血管分割方法
    C/C++面试常见问题——static关键字的主要用法
    响应式基础
    一、C#入门
    Zookeeper
    C# 使用Newtonsoft.Json解析嵌套json
    12讲拆解量化金融时序分析,Kaggle master倾力奉献(中文翻译版)
    java word,excel,ppt转pdf
  • 原文地址:https://blog.csdn.net/m0_74149462/article/details/133768318