Chart 图表

代码演示

折线图

<template>
    <x-chart
        :height="300"
        :option="option"></x-chart>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
    grid: {
        left: '32px',
        right: '32px',
        top: '8px',
        bottom: '24px',
    },
    tooltip: {
        trigger: 'axis',
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
        },
        {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: 'line',
        },
    ],
})
</script>

<style lang="less" scoped></style>

柱状图

<template>
    <x-chart
        :height="300"
        :option="option"></x-chart>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
    grid: {
        left: '32px',
        right: '32px',
        top: '8px',
        bottom: '24px',
    },
    tooltip: {
        trigger: 'axis',
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '15px',
        },
        {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: 'bar',
            barWidth: '15px',
        },
    ],
})
</script>

<style lang="less" scoped></style>

饼图

<template>
    <x-chart
        :height="300"
        :option="option"></x-chart>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
    tooltip: {
        trigger: 'item',
    },
    legend: {
        top: 0,
        left: 'center',
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center',
            },
            labelLine: {
                show: false,
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' },
            ],
        },
    ],
})
</script>

<style lang="less" scoped></style>

雷达(属性)图

<template>
    <x-chart
        :height="300"
        :option="option"></x-chart>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
    grid: {
        left: '32px',
        right: '32px',
        top: '8px',
        bottom: '24px',
    },
    tooltip: {
        trigger: 'item',
    },
    radar: {
        radius: 100,
        center: ['50%', '55%'],
        indicator: [
            { name: '销售', max: 100 },
            { name: '管理', max: 100 },
            { name: '信息技术', max: 100 },
            { name: '客服', max: 100 },
            { name: '研发', max: 100 },
            { name: '市场', max: 100 },
        ],
    },
    series: [
        {
            name: 'SCUI',
            type: 'radar',
            areaStyle: {},
            data: [
                {
                    value: [74, 90, 95, 65, 80, 31],
                },
            ],
        },
    ],
})
</script>

<style lang="less" scoped></style>

K线图

<template>
    <x-chart
        :height="300"
        :option="option"></x-chart>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
    grid: {
        left: '48px',
        right: '32px',
        top: '8px',
        bottom: '24px',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
        },
    },
    xAxis: {
        data: [
            '2017-10-23',
            '2017-10-24',
            '2017-10-25',
            '2017-10-26',
            '2017-10-27',
            '2017-10-28',
            '2017-10-29',
            '2017-10-30',
        ],
    },
    yAxis: {
        scale: true,
    },
    series: [
        {
            type: 'k',
            data: [
                [2213.19, 2199.31, 2191.85, 2224.63],
                [2203.89, 2177.91, 2173.86, 2210.58],
                [2170.78, 2174.12, 2161.14, 2179.65],
                [2179.05, 2205.5, 2179.05, 2222.81],
                [2212.5, 2231.17, 2212.5, 2236.07],
                [2227.86, 2235.57, 2219.44, 2240.26],
                [2242.39, 2246.3, 2235.42, 2255.21],
                [2246.96, 2232.97, 2221.38, 2247.86],
            ],
        },
    ],
})
</script>

<style lang="less" scoped></style>

仪表盘

<template>
    <x-chart
        :height="300"
        :option="option"></x-chart>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
    series: [
        {
            center: ['50%', '60%'],
            type: 'gauge',
            anchor: {
                show: true,
                showAbove: true,
                size: 20,
                itemStyle: {
                    borderWidth: 5,
                },
            },
            progress: {
                show: true,
            },
            data: [
                {
                    value: 70,
                },
            ],
        },
    ],
})
</script>

<style lang="less" scoped></style>

更多用法

提示

1. 基于百度 ECharts 实现，更多使用方式请参考官方文档。https://echarts.apache.org/zh/option.html
2. 可根据实际业务场景自行扩展。详见：/src/components/Chart.vue

API

Props

名称	说明	类型	默认值
option	配置信息，详见 ECharts	object	{}
width	宽	number string	auto
height	高	number string	auto

Events

名称	说明	参数
initialized	初始化完成	chartInstance