technique_web3/src/views/main/elevenHatch/path/echarts2.vue

<template>
  <div>
    <div ref="echarts2" class="echarts2" style="height: 260px; width: 100%"></div>
  </div>
</template>
<style scoped></style>
<script setup>
import * as echarts from 'echarts'
const echarts2 = ref()
onMounted(() => {
  drawEcharts2()
})
function drawEcharts2() {
  var myChart2 = echarts.init(echarts2.value)
  var option2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#57617B'
        }
      }
    },
    legend: {
      data: [
        {
          name: '省重点'
        },
        {
          name: '市重点'
        },
        {
          name: '完成率'
        }
      ],
      top: '0%',
      textStyle: {
        color: 'rgba(255,255,255,0.9)'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
        ],
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '14'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '金额',
        min: 0,
        max: 50,
        interval: 10,
        axisLabel: {
          show: true
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.4)'
          }
        }
      },
      {
        type: 'value',
        name: '完成率',
        show: true,
        axisLabel: {
          show: true
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.4)'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#001e94'
          }
        }
      }
    ],
    grid: {
      top: '20%',
      right: '30',
      bottom: '30',
      left: '30'
    },
    series: [
      {
        name: '省重点',
        type: 'bar',
        data: [4, 6, 36, 6, 8, 6, 4, 6, 30, 6, 8, 12],
        barWidth: 'auto',
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#609db8'
                },
                {
                  offset: 1,
                  color: '#609db8'
                }
              ],
              globalCoord: false
            }
          }
        }
      },
      {
        name: '市重点',
        type: 'bar',
        data: [4, 2, 34, 6, 8, 6, 4, 2, 32, 6, 8, 18],
        barWidth: 'auto',
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#66b8a7'
                },
                {
                  offset: 1,
                  color: '#66b8a7'
                }
              ],
              globalCoord: false
            }
          }
        },
        barGap: '0'
      },
      {
        name: '完成率',
        type: 'line',
        yAxisIndex: 1,
        data: [100, 50, 80, 30, 90, 40, 70, 33, 100, 40, 80, 20],
        lineStyle: {
          normal: {
            width: 2
          }
        },
        itemStyle: {
          normal: {
            color: '#cdba00'
          }
        },
        smooth: true
      }
    ]
  }
  myChart2.setOption(option2)
}
</script>