需要复制的demo

码农小王123123

已于 2024-04-16 13:57:34 修改

阅读量49

点赞数

文章标签：前端 javascript 开发语言

于 2023-11-15 10:19:28 首次发布

本文链接：https://blog.csdn.net/m0_56666791/article/details/134317888

版权

echart demo

<template>
  <div>
      <div ref="chart" style="width:26vw;height:28vw"></div>
      
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import {sitegetAsyncMonthEarningData,groupgetAsyncMonthEarningData} from '../../../api/fenxi'

import { selectedStoreHook,useselectedStore } from "../../../store/modules/selected";

import {getConsistency} from '@/api/jianshi'
onMounted(()=>{
  fetchDatas()
   init(); // 将init函数调用移动到test赋值之后
  // fetchData(); // 在mounted钩子函数中调用fetchData函数
 
})
const fetchDatas = () => {
  getConsistency


}
const chart = ref();

async function init() {
  var myChart = echarts.init(chart.value);


var option = {


  legend: [{
      x2: 300,
      y: 20,
      icon: 'rect',
      itemGap: 3,
      itemWidth: 11,
      itemHeight: 11,
      orient: 'vertical',
      data: ['接收', '发送']
  }],
  grid: [{
      left: 20,
      right: 20,
      top: 80,
      bottom: 20,
      containLabel: true
  }],
  
  dataZoom: {
      type: 'inside',
      filterMode: 'filter',
      orient: 'horizontal',
      xAxisIndex: [0],
  },
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          lineStyle: {
              color: '#57617B'
          }
      },

      
      // formatter: function (params) {
      //         //文字加单位
      //         var relVal = params[0].name;
      //         for (var i = 0, l = params.length; i < l; i++) {
      //           relVal +=
      //             "<br/>" +
      //             params[i].marker +
      //             params[i].seriesName +
      //             " : " +
      //             params[i].value +
      //             "%";
      //         }
      //         return relVal;
      //       },

  },
  xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: {
          lineStyle: {
              color: '#57617B'
          }
      },
      data: date
  }],
  yAxis: {
      type: 'value',
      axisTick: {
          show: false
      },
      axisLine: {
          lineStyle: {
              color: '#57617B'
          }
      },
      axisLabel: {
          formatter: '{value}',
          textStyle: {
              fontSize: 12
          }
      },
      splitLine: {
          lineStyle: {
              color: '#cccccc'
          }
      },
      
  },
  series: [{
      name: '电流',
      type: 'line',
      showSymbol: false,
      tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + 'A';
          }
        },
      lineStyle: {
          normal: {
              width: 0
          }
      },
      itemStyle: {
          normal: {
              color: 'rgba(0,0,255)'
          }
      },
      areaStyle: {
          normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,0,255, 1)'
              }, {
                  offset: 0.8,
                  color: 'rgba(0,0,255, 0.5)'
              }])
          },
      },
      data: cur
  }, {
   
      name: '电压',
      tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + 'V';
          }
        },
      type: 'line',
      showSymbol: false,
      lineStyle: {
          normal: {
              width: 0
          }
      },
      itemStyle: {
          normal: {
              color: 'rgba(0,255,0)'
          }
      },
      areaStyle: {
          normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,255,0,1)'
              }, {
                  offset: 0.8,
                  color: 'rgba(0,255,0, 0.5)'
              }])
          },
      },
      data: vol
  },
  {
      name: '电容',
      type: 'line',
      tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + 'Kwh';
          }
        },
      showSymbol: true,
      lineStyle: {
          normal: {
              width: 2
          }
      },
      itemStyle: {
          normal: {
              color: 'black'
          }
      },
      
      data: cap
  },
]
};
  myChart.setOption(option);
  
}

</script>

echarts 的demo2

<template>
  <div>
      <div ref="chart" style="width:40vw;height:20vw"></div>
      
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import {sitegetAsyncMonthEarningData,groupgetAsyncMonthEarningData} from '../../../api/fenxi'

import { selectedStoreHook,useselectedStore } from "../../../store/modules/selected";

import {GetGroupItem} from '@/api/celue'
onMounted(()=>{
  fetchDatas()
   init(); // 将init函数调用移动到test赋值之后
  // fetchData(); // 在mounted钩子函数中调用fetchData函数
 
})
const fetchDatas = () => {

    GetGroupItem().then(response => {
       console.log(response);
    })
}
const chart = ref();

async function init() {
  var myChart = echarts.init(chart.value);

  var plantCap = [{
    name: '设备组1',
    isopen: '充电中',
    moshiid:'手动',//0 手动 1 自动模式-削峰填谷  2 自动模式 -- 需量控制
    devicenum:12

}, {
    name: '设备组1',
    isopen: '放电中',
    moshiid:'削峰填谷',//0 手动 1 自动模式-削峰填谷  2 自动模式 -- 需量控制
    devicenum:12
},
{
    name: '设备组1',
    isopen: '充电中',
    moshiid:'手动',//0 手动 1 自动模式-削峰填谷  2 自动模式 -- 需量控制
    devicenum:12
}, {
    name: '设备组1',
    isopen: '放电中',
    moshiid:'削峰填谷',//0 手动 1 自动模式-削峰填谷  2 自动模式 -- 需量控制
    devicenum:12
},
{
    name: '设备组1',
    isopen: '充电中',
    moshiid:'手动',//0 手动 1 自动模式-削峰填谷  2 自动模式 -- 需量控制
    devicenum:12
}, {
    name: '设备组1',
    isopen: '放电中',
    moshiid:'削峰填谷',//0 手动 1 自动模式-削峰填谷  2 自动模式 -- 需量控制
    devicenum:12
},{
    name: '设备组1',
    isopen: '放电中',
    moshiid:'削峰填谷',//0 手动 1 自动模式-削峰填谷  2 自动模式 -- 需量控制
    devicenum:12
},
{
    name: '设备组1',
    isopen: '放电中',
    moshiid:'削峰填谷',//0 手动 1 自动模式-削峰填谷  2 自动模式 -- 需量控制
    devicenum:12
},
];
var datalist = [{
    offset: [56, 48],
    symbolSize: 100,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(67, 186, 255, 0)',
    }, {
        offset: 1,
        color: 'rgb(67, 186, 255)'
    }])

}, {
    offset: [30, 70],
    symbolSize: 70,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(67, 186, 255, 0)',
    }, {
        offset: 1,
        color: 'rgb(67, 186, 255)'
    }])
}, {
    offset: [10, 43],
    symbolSize: 70,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(27, 96, 255, 0)',
    }, {
        offset: 1,
        color: 'rgb(27, 96, 255)'
    }])

}, {
    offset: [90, 30],
    symbolSize: 65,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(48, 191, 191, 0)',
    }, {
        offset: 1,
        color: 'rgb(48, 191, 191)'
    }])
}, {
    offset: [35, 25],
    symbolSize: 60,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(0, 166, 166, 0)',
    }, {
        offset: 1,
        color: 'rgb(0, 166, 166)'
    }])
}, {
    offset: [75, 75],
    symbolSize: 55,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(84, 136, 255, 0)',
    }, {
        offset: 1,
        color: 'rgb(84, 136, 255)'
    }])

},
{
    offset: [95, 65],
    symbolSize: 50,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(54, 150, 250, 0)',
    }, {
        offset: 1,
        color: 'rgb(54, 150, 250)'
    }])

},
{
    offset: [89, 90],
    symbolSize: 40,
    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgba(54, 150, 250, 0)',
    }, {
        offset: 1,
        color: 'rgb(54, 150, 250)'
    }])

}
];

var datas = [];
for (var i = 0; i < plantCap.length; i++) {
    var item = plantCap[i];
    var itemToStyle = datalist[i];
    datas.push({
        name: item.name+'\n'+item.isopen + '\n' + item.moshiid,
        value: itemToStyle.offset,
        symbolSize: itemToStyle.symbolSize,
        label: {
            normal: {
                textStyle: {
                    fontSize: 14
                }
            }
        },
        itemStyle: {
            normal: {
                color: itemToStyle.color,
                opacity: itemToStyle.opacity
            }
        },
    })
}
var  option = {
    grid: {
        show: false,
        top: 10,
        bottom: 10
    },

    xAxis: [{
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5
    }],

    yAxis: [{
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: 'middle',
        nameGap: 30
    }],
    series: [{
        type: 'effectScatter',
    symbol: 'path://M160 960V192L293.333 64h405.334L832 192v768H160z m640-256V224H192v704h608V704z m-32-256H224V256h544v192zM576 320H416v32h160v-32z m192 352H224V480h544v192zM576 544H416v32h160v-32z m192 352H224V704h544v192zM576 768H416v32h160v-32z',
     symbolSize: 120,
        label: {
            normal: {
                show: true,
                formatter: '{b}',
                color: '#FFF',
                lineHeight: 15,
                textStyle: {
                    fontSize: '30'
                }
            },
        },
        itemStyle: {
            normal: {
                borderWidth: '1',
                borderType: 'solid',
                borderColor: '#00ffff',
                shadowColor: 'rgba(0, 0, 0, .6)',
                shadowBlur: 10,

            }
        },
        data: datas
    }]

}


  myChart.setOption(option);
  
}

</script>