• echarts设置竖向不同区间范围颜色，并且x轴自定义轴线刻度范围

    需求：设置竖向范围区间，不同范围区间颜色不同并且提示信息不同，之后修改x轴的固定间距范围，让0-200-400-600改为0-340-476-754这种，在这我是markLine的方式实现的，这边我还用到x轴的翻转所以显示的是镜像的。

    1.效果

    2.主要代码

    inverse：翻转轴线

    type必须为value，不然图片显示不出来，其他就是把x轴线给隐藏了，之后再用markLine去手动画一条线

    1.    xAxis: {
    2.                     inverse: true,
    3.                     type: 'value',
    4.                     axisTick: { show: false }, // 隐藏刻度线
    5.                     splitLine: { show: false }, // 隐藏分割线
    6.                     axisLabel: { show: false } // 隐藏刻度值
    7.                 },

    使用markLine画线，data就是线的间隔数据， 

    lineStyle: { color: 'black', type: 'dotted' },线的颜色和类型，可选solid(实线),dashed(虚线)，dotted(斑点虚线)

    1.     markLine: {
    2.                             symbol: false, // 取消箭头
    3.                             silent: true, // 取消鼠标hover事件
    4.                             label: {
    5.                                 position: 'start', // 改变label位置
    6.                                 formatter: (obj) => obj.value // 格式化标签文本
    7.                             },
    8.                             lineStyle: { color: 'black', type: 'dotted' },
    9.                             data: [0, 530, 580, 630].map((val) => {
    10.                                 return {
    11.                                     xAxis: val
    12.                                 };
    13.                             })
    14.                         },

    注意这个data，data的值是530-580之间的差值，差50value就写50，写多了图就错了。。。

    1.      {
    2.                         name: '',
    3.                         tooltip: {
    4.                             trigger: 'item',
    5.                             formatter: '\n围岩级别:IV
      \n。'
    6.                         },
    7.                         type: 'bar',
    8.                         stack: 'total',
    9.                         itemStyle: {
    10.                             color: 'green'
    11.                         },
    12.                         label: {
    13.                             show: true,
    14.                             formatter: 'IV',
    15.                             color: 'black'
    16.                         },
    17.                         emphasis: {
    18.                             focus: 'series'
    19.                         },
    20.                         data: [
    21.                             {
    22.                                 value: 50,
    23.                                 xAxis: 1
    24.                             }
    25.                         ]
    26.                     },

    3.完整代码

    2.  
    3. <script>
    4. export default {
    5.     name: 'LineECharts', // 折线图
    6.     data() {
    7.         return {};
    8.     },
    9.     methods: {
    10.         drawLine() {
    11.             // 获取当前日期
    12.             // let nowTime = new Date().toLocaleDateString().split('/').join('-');
    13.             // 基于准备好的dom，初始化echarts实例
    14.             let myChartOne = this.$echarts.init(document.getElementById('LineECharts'));
    15.             // 绘制图表
    16.             myChartOne.setOption({
    17.                 tooltip: {
    18.                     trigger: 'item',
    19.                     axisPointer: {
    20.                         type: 'shadow'
    21.                     }
    22.                 },
    23.                 grid: {
    24.                     left: '3%',
    25.                     right: '4%',
    26.                     bottom: '3%',
    27.                     containLabel: true
    28.                 },
    29.                 xAxis: {
    30.                     inverse: true,
    31.                     type: 'value',
    32.                     axisTick: { show: false }, // 隐藏刻度线
    33.                     splitLine: { show: false }, // 隐藏分割线
    34.                     axisLabel: { show: false } // 隐藏刻度值
    35.                 },
    36.                 yAxis: {
    37.                     type: 'category',
    38.                     data: ['级别']
    39.                 },
    40.                 series: [
    41.                     {
    42.                         name: '',
    43.                         tooltip: {
    44.                             trigger: 'item',
    45.                             formatter: '\n  围岩级别:III
      \n'
    46.                         },
    47.                         type: 'bar',
    48.                         stack: 'total',
    49.                         itemStyle: {
    50.                             color: '#ddd'
    51.                         },
    52.                         label: {
    53.                             show: true,
    54.                             formatter: 'III',
    55.                             color: 'black'
    56.                         },
    57.                         emphasis: {
    58.                             focus: 'series'
    59.                         },
    60.                         data: [
    61.                             {
    62.                                 value: 530,
    63.                                 xAxis: 0
    64.                             }
    65.                         ],
    66.                         markLine: {
    67.                             symbol: false, // 取消箭头
    68.                             silent: true, // 取消鼠标hover事件
    69.                             label: {
    70.                                 position: 'start', // 改变label位置
    71.                                 formatter: (obj) => obj.value // 格式化标签文本
    72.                             },
    73.                             lineStyle: { color: 'black', type: 'dotted' },
    74.                             data: [0, 530, 580, 630].map((val) => {
    75.                                 return {
    76.                                     xAxis: val
    77.                                 };
    78.                             })
    79.                         }
    80.                     },
    81.                     {
    82.                         name: '',
    83.                         tooltip: {
    84.                             trigger: 'item',
    85.                             formatter: '\n围岩级别:IV
      \n。'
    86.                         },
    87.                         type: 'bar',
    88.                         stack: 'total',
    89.                         itemStyle: {
    90.                             color: 'green'
    91.                         },
    92.                         label: {
    93.                             show: true,
    94.                             formatter: 'IV',
    95.                             color: 'black'
    96.                         },
    97.                         emphasis: {
    98.                             focus: 'series'
    99.                         },
    100.                         data: [
    101.                             {
    102.                                 value: 50,
    103.                                 xAxis: 1
    104.                             }
    105.                         ]
    106.                     },
    107.                     {
    108.                         name: '',
    109.                         tooltip: {
    110.                             trigger: 'item',
    111.                             formatter: '\n 围岩级别:V
      \n 。'
    112.                         },
    113.                         type: 'bar',
    114.                         stack: 'total',
    115.                         itemStyle: {
    116.                             color: '#333'
    117.                         },
    118.                         label: {
    119.                             show: true,
    120.                             formatter: 'V',
    121.                             color: 'black'
    122.                         },
    123.                         emphasis: {
    124.                             focus: 'series'
    125.                         },
    126.                         data: [
    127.                             {
    128.                                 value: 50,
    129.                                 xAxis: 2
    130.                             }
    131.                         ]
    132.                     }
    133.                 ]
    134.             });
    135.             window.onresize = () => {
    136.                 // 根据窗口大小变化图表自适应
    137.                 myChartOne.resize();
    138.             };
    139.         }
    140.     },
    141.     mounted() {
    142.         this.drawLine();
    143.     }
    144. };
    145. script>

    4.其他补充

    这个是鼠标移动后显示的内容的，可以自定义内容，也可以设置弹窗距离鼠标的位置等

    1.  // 鼠标划入的弹出框
    2.         tooltip: {
    3.           trigger: 'axis',
    4.           axisPointer: {
    5.             // 坐标轴指示器，坐标轴触发有效
    6.             type: this.colunm.type ? this.colunm.type : 'shadow' // 默认为阴影，可选为：'line' | 'shadow'
    7.           },
    8.           textStyle: {
    9.             color: this.colunm.tooltipcolor,
    10.             fontFamily: '等线'
    11.             // fontSize:'0.1rem'
    12.           },
    13.           borderColor: this.colunm.tooltipborderColor,
    14.           backgroundColor: this.colunm.tooltipbackgroundColor,
    15.           position: function (p) {
    16.             //其中p为当前鼠标的位置
    17.             return [p[0] + 10, p[1] - 60]
    18.           },
    19.           // textStyle: {
    20.           //   fontSize: 12 // 字体大小
    21.           // }
    22.           // confine: true,
    23.           // extraCssText: 'white-space: normal; word-break: break-all;',
    24.  
    25.           confine: true, //限制tooltip在图表范围内展示
    26.           // extraCssText: 'max-height:100%;overflow:scroll', //最大高度以及超出处理
    27.           // enterable: true, //鼠标可以进入tooltip区域，使用滚动条
    28.           //  position: [100, 10]// position: ['10px', '10px']
    29.           formatter: function (params) {
    30.             // 提示内容太多隔行显示内容
    31.             let astr = ''
    32.             params.forEach((ele, index) => {
    33.               astr += `
    34.                                 
      ${
    35.                                   index % 2 === 0
    36.                                     ? 'width: 45%;'
    37.                                     : 'width: 38%;'
    38.                                 }float:left;">
    39.                                     ${
    40.                                       ele.color
    41.                                     };border-radius: 10px;">
    42.                                     ${ele.seriesName}: ${ele.data}
    43.
  • `
  • })
  • const b = '
    ' + astr + '
    '
  • return b
  • }
  • },

    • 文章到此结束，希望对你有所帮助~~

  • 相关阅读:
    [机缘参悟-72]：深度思考-人生自省的四重境界：不觉、自觉、觉他、圆满
    Mysql 读写分离
    第三章：使用Vue脚手架
    《机械原理》上 学后感
    kotlin类与对象
    奇迹MU架设常见问题解决
    我操作MySQL的惊险一幕
    配置Android Studio问题总结
    Qt-OpenCV学习笔记--膨胀--dilate()
    基于ssm设备租赁报修借用管理系统java项目源码
  • 原文地址：https://blog.csdn.net/qq_44278289/article/details/133928180