165 lines
4.8 KiB
Plaintext
165 lines
4.8 KiB
Plaintext
<template>
|
|
<div ref="chartRef" :style="{ height, width }"></div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, PropType, ref, Ref } from 'vue';
|
|
import { useECharts } from '@/hooks/web/useECharts';
|
|
|
|
defineProps({
|
|
width: {
|
|
type: String as PropType<string>,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String as PropType<string>,
|
|
default: '350px',
|
|
},
|
|
});
|
|
const chartRef = ref<HTMLDivElement | null>(null);
|
|
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
|
|
|
|
const option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
value: 8765,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 4598,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 13567,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 4789,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 9876,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 5478,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 3289,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 13423,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 6543,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 7689,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 8235,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
value: 6578,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' },
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
type: 'bar',
|
|
},
|
|
],
|
|
};
|
|
|
|
onMounted(() => {
|
|
setOptions(option as any);
|
|
});
|
|
</script>
|