图例内容/效果实现

chenzeping

2021-03-05 027d237a54bd813b811f77bec4d778be543c2a6d

 src/components/mapmodules/SafetyIndexBar.js

@@ -1,120 +1,122 @@
import echarts from 'echarts'

function drawSafetyBar(carDataArray, shipDataArray, plateDataArray) {
    let myChart = echarts.init(document.getElementById('safetyBarIndex'))
    myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
                color: '#33FF90'
            },
            extraCssText: 'background-color: rgba(73,177,231, 0.1);'
function drawSafetyBar (carDataArray, shipDataArray, plateDataArray) {
  const myChart = echarts.init(document.getElementById('safetyBarIndex'))
  myChart.setOption({
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      textStyle: {
        color: '#33FF90'
      },
      extraCssText: 'background-color: rgba(73,177,231, 0.1);'
    },
    legend: {
      data: ['船舶', '车辆'],
      top: '6%',
      right: '4%',
      textStyle: {
        color: '#33FFF8'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: plateDataArray,
        axisTick: {
          alignWithLabel: true
        },
        legend: {
            data: ['船舶', '车辆'],
            top: '6%',
            right: '4%',
            textStyle: {
                color: '#33FFF8'
            }
        axisLabel: {
          color: '#33FFF8'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#33FFF8'
        },
        xAxis: [
            {
                type: 'category',
                data: plateDataArray,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: '#33FFF8'
                },
                splitLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: '#33FFF8'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: [ '#315070' ],
                        width: 1,
                        type: 'dashed'
                    }
                }
            }
        ],
        series: [
            {
                name: '船舶',
                type: 'bar',
                barWidth: '12%',
                color: 'rgb(88,228,239)',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, // 开启显示
                            position: 'top', // 在上方显示
                            textStyle: { // 数值样式
                                color: '#ffffff',
                                fontSize: 12
                            }
                        },
                        barBorderRadius: [15, 15, 0, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#00ACFE' },
                            { offset: 0.5, color: '#034B88' },
                            { offset: 1, color: '#051A4C' }
                        ])
                    }
                },
                data: shipDataArray
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#315070'],
            width: 1,
            type: 'dashed'
          }
        }
      }
    ],
    series: [
      {
        name: '船舶',
        type: 'bar',
        barWidth: '12%',
        color: 'rgb(88,228,239)',
        itemStyle: {
          normal: {
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              textStyle: { // 数值样式
                color: '#ffffff',
                fontSize: 12
              }
            },
            {
                name: '车辆',
                type: 'bar',
                barWidth: '12%',
                color: 'rgb(73,117,231)',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, // 开启显示
                            position: 'top', // 在上方显示
                            textStyle: { // 数值样式
                                color: '#ffffff',
                                fontSize: 12
                            }
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#FED700' },
                            { offset: 0.5, color: '#846B03' },
                            { offset: 1, color: '#423105' }
                        ]),
                        barBorderRadius: [ 15, 15, 0, 0 ]
                    }
                },
                data: carDataArray
            }
        ]
    })
    window.addEventListener('resize', () => { myChart.resize() })
            barBorderRadius: [15, 15, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00ACFE' },
              { offset: 0.5, color: '#034B88' },
              { offset: 1, color: '#051A4C' }
            ])
          }
        },
        data: shipDataArray
      },
      {
        name: '车辆',
        type: 'bar',
        barWidth: '12%',
        color: 'rgb(73,117,231)',
        itemStyle: {
          normal: {
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              textStyle: { // 数值样式
                color: '#ffffff',
                fontSize: 12
              }
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#FED700' },
              { offset: 0.5, color: '#846B03' },
              { offset: 1, color: '#423105' }
            ]),
            barBorderRadius: [15, 15, 0, 0]
          }
        },
        data: carDataArray
      }
    ]
  })
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

export default {
    drawSafetyBar
  drawSafetyBar
}