echart-line.vue 1.92 KB
Newer Older
wuhao's avatar
wuhao committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
<script setup>
const state=reactive({
  chartData:{
    legend:['埋深'],
    colors:[$c.bll5,],
    data:[235, 210, 187, 212, 278, 220, 320, 302, 301, 334],
  },
  chartOption:{ }
})

const props=defineProps({ 
  barColor:{
    type:String,
    default:""
  },
})

const processData=()=>{
  const {barColor}=props
  let {colors,xAxis,data}=state.chartData,
      processedData=[],
      color=barColor?barColor:colors[0]
  processedData.push({
    type: "line",
    symbolSize: 0,
    label: { show: false, },
    itemStyle:{
      color: $c.fade(color,.1),
      borderRadius: 3,
    },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: $c.fade(color,.9)
      }, {
        offset: 0.8,
        color: $c.fade(color,.5)
      }], false),
      // shadowcolor: $c.fade(color,.3),
      // shadowBlur: 10
    },
    smooth: true,
    data: data
  })
  state.chartOption.series=processedData;
  state.chartOption.xAxis.data=xAxis;
}

const processOption=()=>{
  state.chartOption={
    update:false,
    // title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, },
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器,坐标轴触发有效
        type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
      }
    },
    
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    },
    yAxis:{
      type: 'value',
      axisLine: {show:false},
      splitLine: {show:false},
      axisLabel: {show:false}
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLine: {show:false},
      splitLine: {show:false},
      axisLabel: {show:false,}
    },
    series: []
  }
  processData();
}

onMounted(() => {
  processOption();
})
</script>
<template>
  <echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less">
</style>