image.png

option配置

  2. var chartData = [100, 200, 300] // 数据
  3. var yMax = '' // 最大值
  4. for (var i = 0;i < chartData.length;i += 1) {
  5.   yMax = chartData[i]
  6. }
  7. yMax += yMax / 10
  8. var yMaxArr = [] // 全部都是最大值, 做图形的底部灰色打底
  9. for (var i = 0;i < chartData.length;i += 1) {
  10.   yMaxArr.push(yMax)
  11. }
  12. var chartName = ['你这么笨!', '还不努力,', '你想干嘛?']
  14. //4.制定图标的配置项和数据
  15. option = {
  16.   backgroundColor: '#0f375f',
  17.   tooltip: {
  18.     trigger: 'axis',
  19.     axisPointer: {
  20.       type: 'none', // 去除鼠标移入的时候的阴影/竖线等
  21.     },
  22.     backgroundColor: '#ccc', // 浮层的文本背景
  23.     textStyle: {
  24.       color: 'red', // 浮层的文本颜色
  25.     },
  26.     formatter: '{a}:{c}', //浮层内容格式 a: series中的name c 数据值
  27.   },
  28.   legend: {},
  29.   xAxis: {
  30.     type: 'value',
  31.     axisLine: {
  32.       lineStyle: {
  33.         color: '#ccc'
  34.       }
  35.     },
  36.     show: false,
  37.     splitLine: {
  38.       show: false
  39.     },
  40.   },
  41.   yAxis: [{
  42.     type: 'category',
  43.     data: chartName,
  44.     splitLine: {
  45.       show: false
  46.     },
  47.     show: false,
  48.     axisLine: {
  49.       lineStyle: {
  50.         color: '#ccc'
  51.       }
  52.     }
  53.   }, { // 第二个y轴 为了让数据在右侧末尾显示
  54.     show: true,
  55.     inverse: true,
  56.     data: chartData,
  57.     nameTextStyle: {},// 坐标轴名称的文字样式。 官网上是这样的解释, 但是 我试了这个并不能改变坐标轴的文字样式
  58.     axisLabel: {
  59.       textStyle: {
  60.         fontSize: 12, //坐标轴名称的大小
  61.         color: 'blue', // 坐标轴名称的颜色
  62.       },
  63.     },
  64.     axisLine: {
  65.       show: false
  66.     },
  67.     splitLine: {
  68.       show: false
  69.     },
  70.     axisTick: {
  71.       show: false
  72.     },
  74.   }],
  75.   series: [{
  76.     name: '我是打底',
  77.     type: 'pictorialBar',
  78.     symbol: 'rect', // 类型
  79.     yAxisIndex: 0,
  80.     barWidth: 10,
  81.     itemStyle: {
  82.       normal: {
  83.         barBorderRadius: 5,
  84.         color: '#ccc',
  85.       }
  86.     },
  87.     label: {
  88.       normal: {
  89.         position: 'right',
  90.       }
  91.     },
  92.     symbolRepeat: true,
  93.     symbolRotate: '45',
  94.     symbolSize: [12, 4],
  95.     symbolMargin: 2,
  96.     data: yMaxArr,
  97.   }, {
  98.     name: '我是上层方块',
  99.     type: 'pictorialBar',
  100.     symbol: 'rect',
  101.     itemStyle: {
  102.       normal: {
  103.         color: 'red'
  104.       }
  105.     },
  106.     label: {
  107.       normal: {
  108.         // show: true, // 数据大小的显示, 100 200 300
  109.         textStyle: {
  110.           color: '#000000', // 颜色
  111.         },
  112.         position: 'right',
  113.       },
  114.     },
  115.     barWidth: 10,
  116.     symbolRepeat: true,
  117.     symbolRotate: '45',
  118.     symbolSize: [12, 4],
  119.     symbolMargin: 2,
  120.     data: [100, 200, 300],
  121.   },
  122.   // 数据条--------------------我是分割线君------------------------------//
  123.   {
  124.     show: true,
  125.     type: 'bar',
  126.     // xAxisIndex: 1, //代表使用第二个X轴刻度
  127.     barGap: '-100%',
  128.     barWidth: '10%',
  129.     itemStyle: {
  130.       normal: {
  131.         barBorderRadius: 200,
  132.         // color: 'yellow',
  133.         color: 'transparent', //rgba(22,203,115,0.05) 数据条柱状图的填充颜色,, 一开始我的有一点点背景颜色
  134.       }
  135.     },
  136.     label: {
  137.       normal: {
  138.         show: true,
  139.         position: [0, '-20'],
  140.         textStyle: {
  141.           fontSize: 14,
  142.           color: 'pink',
  143.         },
  144.         formatter: function (data) {
  145.           return chartName[data.dataIndex]
  146.         }
  147.       }
  148.     },
  149.     data: chartData
  150.   }
  151.   ]
  152. }

参考 https://blog.csdn.net/zm_miner/article/details/89847195