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();
})
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'
}
},
},
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();
})
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:'手动',
devicenum:12
}, {
name: '设备组1',
isopen: '放电中',
moshiid:'削峰填谷',
devicenum:12
},
{
name: '设备组1',
isopen: '充电中',
moshiid:'手动',
devicenum:12
}, {
name: '设备组1',
isopen: '放电中',
moshiid:'削峰填谷',
devicenum:12
},
{
name: '设备组1',
isopen: '充电中',
moshiid:'手动',
devicenum:12
}, {
name: '设备组1',
isopen: '放电中',
moshiid:'削峰填谷',
devicenum:12
},{
name: '设备组1',
isopen: '放电中',
moshiid:'削峰填谷',
devicenum:12
},
{
name: '设备组1',
isopen: '放电中',
moshiid:'削峰填谷',
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:
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>
