• 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. },

  • 相关阅读:
    论文复现《SplaTAM: Splat, Track & Map 3D Gaussians for Dense RGB-D SLAM》
    前端try和catch
    【特刊征稿】SI特刊“可计算情感”征稿(综合性期刊IF=2.8)
    protobuf在linux下载编译和使用
    IB课程四大要领,一起来学习学习
    Typecho博客搭建+cpolar内网穿透实现公网访问内网站点
    精通 VS 调试技巧,学习与工作效率翻倍!
    MIT6.S081 2021 locks
    游戏如何做到无视攻击
    CoLAKE: 如何实现非结构性语言和结构性知识表征的同步训练
  • 原文地址:https://blog.csdn.net/m0_74149462/article/details/133768318