React18 apexcharts数据可视化之折线图

已于 2024-05-27 10:08:48 修改
阅读量404 收藏 3
点赞数 10
分类专栏： Web React 文章标签： 信息可视化 前端 react
于 2024-05-27 09:31:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37703224/article/details/139226709
版权
Web 同时被 2 个专栏收录
60 篇文章 0 订阅
订阅专栏
React
36 篇文章 0 订阅
订阅专栏

基础折线图

import ApexChart from 'react-apexcharts';

export function Basic() {
    // 数据序列
    const series = [
        {
            name: "Desktops",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        },
    ]
    // 图表选项
    const options = {
        // 图表
        chart: {
            height: 650,
            type: 'line',
            zoom: {
                enabled: false
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight'
        },
        // 标题
        title: {
            text: '每月产品成交量',
            align: 'left'
        },
        // 网格
        grid: {
            row: {
                colors: ['#f3f3f3', 'transparent'],
                opacity: 0.5
            },
        },
        // x轴
        xaxis: {
            categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
        }
    }
    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={650}/>
        </div>
    )
}

在这里插入图片描述

带标签的多折线图

import ApexChart from 'react-apexcharts';

export function LineChartWithLabel() {
    // 数据序列
    const series = [
        {
            name: "2023年每月最高温度",
            data: [28, 29, 33, 36, 32, 32, 33]
        },
        {
            name: "2023年每月最低温度",
            data: [12, 11, 14, 18, 17, 13, 13]
        }
    ]
    // 图表选项
    const options ={
        chart: {
            height: 540,
            type: 'line',
            dropShadow: {
                enabled: true,
                color: '#000',
                top: 18,
                left: 7,
                blur: 10,
                opacity: 0.2
            },
            zoom: {
                enabled: false
            },
            toolbar: {
                show: false
            }
        },
        colors: ['#77B6EA', '#545454'],
        dataLabels: {
            enabled: true,
        },
        stroke: {
            curve: 'smooth'
        },
        // 标题
        title: {
            text: '某城市最低气温和最高气温对比图',
            align: 'left'
        },
        // 网格
        grid: {
            borderColor: '#e7e7e7',
            row: {
                colors: ['#f3f3f3', 'transparent'],
                opacity: 0.5
            },
        },
        // 标记点
        markers: {
            size: 1
        },
        // x轴
        xaxis: {
            categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
            title: {
                text: '月份'
            }
        },
        // y轴
        yaxis: {
            title: {
                text: '温度'
            },
            min: 5,
            max: 40
        },
        legend: {
            position: 'top',
            horizontalAlign: 'right',
            floating: true,
            offsetY: -25,
            offsetX: -5
        }
    }
    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

多Y轴

import ApexChart from 'react-apexcharts';

// 重置随机数种子
let _seed = 42;
Math.random = function () {
    _seed = _seed * 16807 % 2147483647;
    return (_seed - 1) / 2147483646;
};

// 生成随机的时间数组
// @param baseval 基础值
// @param count 个数
// @param yrange 年份范围
function generateDayWiseTimeSeries(baseval, count, yrange) {
    let i = 0;
    let series = [];
    while (i < count) {
        let x = baseval;
        let y = Math.floor(Math.random() * (yrange.max - yrange.min + 1) * i / count) + yrange.min;

        series.push([x, y]);
        baseval += 86400000;
        i++;
    }
    return series;
}

// 生成数据1
let data1 = generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 185, {
    min: 20,
    max: 100
})

// 生成数据2
let data2 = generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 185, {
    min: 5,
    max: 50
})

export function Brush() {
    // 数据序列
    const series = [{
        name: '苍蝇数量',
        data: data1
    }, {
        name: '蜘蛛数量',
        data: data2
    }]

    // 图表选项
    const options = {
        // 图表设置
        chart: {
            id: 'chart2',
            type: 'line',
            height: 540,
            dropShadow: {
                enabled: true,
                enabledOnSeries: [1]
            },
            toolbar: {
                autoSelected: 'pan',
                show: false
            }
        },
        // 设置图表的颜色
        colors: ['#008FFB', '#00E396'],
        // 设置数据标签
        dataLabels: {
            enabled: false
        },
        // 设置线条
        stroke: {
            width: [2, 6],
            curve: ['straight', 'monotoneCubic']
        },
        // 填充
        fill: {
            opacity: [1, 0.75],
        },
        // 标记点
        markers: {
            size: 0
        },
        // y轴设置
        yaxis: [
            {
                seriesName: '苍蝇',
                axisTicks: {
                    show: true,
                    color: '#008FFB'
                },
                axisBorder: {
                    show: true,
                    color: '#008FFB'
                },
                labels: {
                    style: {
                        colors: '#008FFB',
                    }
                },
                title: {
                    text: "苍蝇",
                    style: {
                        color: '#008FFB'
                    }
                },
            },
            {
                seriesName: '蜘蛛',
                opposite: true,
                axisTicks: {
                    show: true,
                    color: '#00E396'
                },
                axisBorder: {
                    show: true,
                    color: '#00E396'
                },
                labels: {
                    style: {
                        colors: '#00E396'
                    }
                },
                title: {
                    text: "蜘蛛",
                    style: {
                        color: '#00E396'
                    }
                },
            }
        ],
        // x 轴
        xaxis: {
            type: 'datetime'
        }
    }
    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

虚线

import ApexChart from 'react-apexcharts';

export function DashedLine() {
    // 数据序列
    const series = [
        {
            name: "会话时长",
            data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
        },
        {
            name: "页面浏览量",
            data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
        },
        {
            name: '总访问量',
            data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
        }
    ]
    // 图表选项
    const options = {
        // 图表设置
        chart: {
            height: 530,
            type: 'line',
            zoom: {
                enabled: false
            },
        },
        // 数据标签
        dataLabels: {
            enabled: false
        },
        // 线条设置
        stroke: {
            width: [5, 7, 5],
            curve: 'straight',
            dashArray: [0, 8, 5], // 设置虚线粗细
        },
        // 标题
        title: {
            text: '页面统计',
            align: 'left'
        },
        // 图例
        legend: {
            tooltipHoverFormatter: function (val, opts) {
                return val + ' - <strong>' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '</strong>'
            }
        },
        // 标记
        markers: {
            size: 0,
            hover: {
                sizeOffset: 6
            }
        },
        // x轴
        xaxis: {
            categories: [
                '1月1日', '1月2日', '1月3日',
                '1月4日', '1月5日', '1月6日',
                '1月7日', '1月8日', '1月9日',
                '1月10日', '1月11日', '1月12日'
            ],
        },
        // 提示
        tooltip: {
            y: [
                {
                    title: {
                        formatter: function (val) {
                            return val + " (分钟)"
                        }
                    }
                },
                {
                    title: {
                        formatter: function (val) {
                            return val + "(每次会话)"
                        }
                    }
                },
                {
                    title: {
                        formatter: function (val) {
                            return val;
                        }
                    }
                }
            ]
        },
        // 网格
        grid: {
            borderColor: '#f1f1f1',
        }
    }
    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

渐变折线图

import ApexChart from 'react-apexcharts';

export function GradientLine() {
    // 数据序列
    const series = [{
        name: '销量',
        data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5]
    }]
    // 图表选项
    const options = {
        // 图表
        chart: {
            height: 350,
            type: 'line',
        },
        // 用于预测的数据量，从右到左这个数据点虚线展示
        forecastDataPoints: {
            count: 8
        },
        // 线条
        stroke: {
            width: 5,
            curve: 'smooth'
        },
        // x轴
        xaxis: {
            type: 'datetime',
            categories: ['1/11/2000', '2/11/2000', '3/11/2000', '4/11/2000', '5/11/2000', '6/11/2000', '7/11/2000', '8/11/2000', '9/11/2000', '10/11/2000', '11/11/2000', '12/11/2000', '1/11/2001', '2/11/2001', '3/11/2001', '4/11/2001', '5/11/2001', '6/11/2001'],
            tickAmount: 10,
            labels: {
                formatter: function (value, timestamp, opts) {
                    return opts.dateFormatter(new Date(timestamp), 'MM-dd')
                }
            }
        },
        // 标题
        title: {
            text: '预测',
            align: 'left',
            style: {
                fontSize: "16px",
                color: '#666'
            }
        },
        // 填充，渐变色
        fill: {
            type: 'gradient',
            gradient: {
                shade: 'dark',
                gradientToColors: ['#FDD835'],
                shadeIntensity: 1,
                type: 'horizontal',
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100, 100, 100]
            },
        }
    }
    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

折线图的注解

import ApexChart from 'react-apexcharts';

export function LineWithAnnotations() {
    // 数据序列
    const series = [{
        data: [
            8107.85,
            8128.0,
            8122.9,
            8165.5,
            8340.7,
            8423.7,
            8423.5,
            8514.3,
            8481.85,
            8487.7,
            8506.9,
            8626.2,
            8668.95,
            8602.3,
            8607.55,
            8512.9,
            8496.25,
            8600.65,
            8881.1,
            9340.85
        ]
    }]
    // 图表选项
    const options = {
        chart: {
            height: 350,
            type: 'line',
            id: 'areachart-2'
        },
        // 注解
        annotations: {
            // y轴上的注解
            yaxis: [
                {
                    y: 8200,
                    borderColor: '#00E396',
                    label: {
                        borderColor: '#00E396',
                        style: {
                            color: '#fff',
                            background: '#00E396',
                        },
                        text: 'y轴的线注解',
                    }
                },
                {
                    y: 8600,
                    y2: 9000,
                    borderColor: '#000',
                    fillColor: '#FEB019',
                    opacity: 0.2,
                    label: {
                        borderColor: '#333',
                        style: {
                            fontSize: '10px',
                            color: '#333',
                            background: '#FEB019',
                        },
                        text: 'y轴的范围注解',
                    }
                }
            ],
            // x 轴上的注解
            xaxis: [
                {
                    x: new Date('23 Nov 2017').getTime(),
                    strokeDashArray: 0,
                    borderColor: '#775DD0',
                    label: {
                        borderColor: '#775DD0',
                        style: {
                            color: '#fff',
                            background: '#775DD0',
                        },
                        text: 'x轴的线注解',
                    }
                },
                {
                    x: new Date('26 Nov 2017').getTime(),
                    x2: new Date('28 Nov 2017').getTime(),
                    fillColor: '#B3F7CA',
                    opacity: 0.4,
                    label: {
                        borderColor: '#B3F7CA',
                        style: {
                            fontSize: '10px',
                            color: '#fff',
                            background: '#00E396',
                        },
                        offsetY: -10,
                        text: 'x轴的范围注解',
                    }
                }
            ],
            // 具体点的注解
            points: [
                {
                    x: new Date('01 Dec 2017').getTime(),
                    y: 8607.55,
                    marker: {
                        size: 8,
                        fillColor: '#fff',
                        strokeColor: 'red',
                        radius: 2,
                        cssClass: 'apexcharts-custom-class'
                    },
                    label: {
                        borderColor: '#FF4560',
                        offsetY: 0,
                        style: {
                            color: '#fff',
                            background: '#FF4560',
                        },

                        text: '点的注解',
                    }
                },
                {
                    x: new Date('08 Dec 2017').getTime(),
                    y: 9340.85,
                    marker: {
                        size: 0
                    },
                    // 基于图片的注解
                    image: {
                        path: '/ico-instagram.png'
                    }
                }
            ]
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight'
        },
        grid: {
            padding: {
                right: 30,
                left: 20
            }
        },
        title: {
            text: '折线图的注解',
            align: 'left'
        },
        labels: [
            "13 Nov 2017",
            "14 Nov 2017",
            "15 Nov 2017",
            "16 Nov 2017",
            "17 Nov 2017",
            "20 Nov 2017",
            "21 Nov 2017",
            "22 Nov 2017",
            "23 Nov 2017",
            "24 Nov 2017",
            "27 Nov 2017",
            "28 Nov 2017",
            "29 Nov 2017",
            "30 Nov 2017",
            "01 Dec 2017",
            "04 Dec 2017",
            "05 Dec 2017",
            "06 Dec 2017",
            "07 Dec 2017",
            "08 Dec 2017"
        ],
        xaxis: {
            type: 'datetime',
        },
    }

    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

使用图片作为线条背景

import ApexChart from 'react-apexcharts';

export function LineWithImage() {
    // 数据序列
    const series = [
        {
            name: '数据集1',
            data: [20, 31, 14, 40, 12, 55, 13, 13, 9, 19, 20, 41, 36, 62, 60]
        },
        {
            name: '数据集2',
            data: [10, 5, 20, 13, 15, 12, 13, 24, 24, 34, 7, 15, 10, 9, 26]
        }
    ]
    // 图表选项
    const options = {
        chart: {
            height: 350,
            type: 'line',
        },
        stroke: {
            width: 5,
            curve: 'smooth'
        },
        colors: ['#2e93fa'],
        xaxis: {
            categories: ['1990', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005'],
            labels: {
                formatter: function (val) {
                    return val
                }
            }
        },
        title: {
            text: '使用图片作为线条背景',
            align: 'left',
            style: {
                fontSize: "16px",
            }
        },
        // 使用图片填充
        fill: {
            type: 'image',
            image: {
                src: [
                    '/abstract.jpg'
                ],
                width: 800,
                height: 800
            },
        },
        markers: {
            size: 0,
            opacity: 0,
            colors: ['#fff'],
            strokeColor: "#2e93fa",
            strokeWidth: 2,
            hover: {
                size: 8,
            }
        },
        yaxis: {
            title: {
                text: '$ (million)',
            },
        },
        legend: {
            position: 'top',
            horizontalAlign: 'right',
            floating: true,
            offsetY: -25,
            offsetX: -5
        }
    }

    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

缺失值处理

import ApexChart from 'react-apexcharts';

export function LineWithMissingData() {
    // 数据序列
    const series = [
        {
            name: '张三',
            data: [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9]
        },
        {
            name: '李四',
            data: [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null]
        },
        {
            name: '王五',
            data: [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null]
        }
    ]
    // 图表选项
    const options = {
        chart: {
            height: 350,
            type: 'line',
            zoom: {
                enabled: false
            },
            animations: {
                enabled: false
            }
        },
        stroke: {
            width: [5, 5, 4],
            curve: 'smooth'
        },
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
        title: {
            text: '缺失值处理 (null)'
        },
        xaxis: {},
    }

    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

直角折线图

import ApexChart from 'react-apexcharts';

export function LineStep() {
    // 数据序列
    const series = [
        {
            data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
        }
    ]
    // 图表选项
    const options = {
        chart: {
            type: 'line',
            height: 350
        },
        // 线条是直角
        stroke: {
            curve: 'linestep',
        },
        dataLabels: {
            enabled: false
        },
        title: {
            text: '直角折线图',
            align: 'left'
        },
        markers: {
            hover: {
                sizeOffset: 4
            }
        }
    }

    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

对数缩放

import ApexChart from 'react-apexcharts';

let data = [
    {
        x: 1994,
        y: 2543763
    },
    {
        x: 1995,
        y: 4486659
    },
    {
        x: 1996,
        y: 7758386
    },
    {
        x: 1997,
        y: 12099221
    },
    {
        x: 1998,
        y: 18850762
    },
    {
        x: 1999,
        y: 28153765
    },
    {
        x: 2000,
        y: 41479495
    },
    {
        x: 2001,
        y: 50229224
    },
    {
        x: 2002,
        y: 66506501
    },
    {
        x: 2003,
        y: 78143598
    },
    {
        x: 2004,
        y: 91332777
    },
    {
        x: 2005,
        y: 103010128
    },
    {
        x: 2006,
        y: 116291681
    },
    {
        x: 2007,
        y: 137322698
    },
    {
        x: 2008,
        y: 157506752
    },
    {
        x: 2009,
        y: 176640381
    },
    {
        x: 2010,
        y: 202320297
    },
    {
        x: 2011,
        y: 223195735
    },
    {
        x: 2012,
        y: 249473624
    },
    {
        x: 2013,
        y: 272842810
    },
    {
        x: 2014,
        y: 295638556
    },
    {
        x: 2015,
        y: 318599615
    },
    {
        x: 2016,
        y: 342497123
    }
]

// 格式化标签
let labelFormatter = function (value) {
    let val = Math.abs(value)
    if (val >= 100000) {
        return (val / 1000000).toFixed(1) + ' M';
    }
    return val.toFixed(0);
}

export function LogarithmicLine() {
    // 数据序列
    const series = [
        {
            name: "对数",
            data: data
        },
        {
            name: "线性",
            data: data
        }
    ]
    // 图表选项
    const options = {
        // 图表设置
        chart: {
            height: 350,
            type: 'line',
            zoom: {
                enabled: false
            }
        },
        dataLabels: {
            enabled: false
        },
        // 线条
        stroke: {
            curve: 'monotoneCubic',
        },
        title: {
            text: '对数缩放',
            align: 'left'
        },
        xaxis: {
            type: 'datetime'
        },
        yaxis: [
            // 对数
            {
                min: 1000000,
                max: 500000000,
                tickAmount: 4,
                logarithmic: true, // 开启对数
                seriesName: '对数',
                labels: {
                    formatter: labelFormatter,
                    style: {
                        fontWeight: 900,
                        colors: 'rgb(0, 143, 251)'
                    }
                },
                title: {
                    text: '对数',
                    style: {
                        fontWeight: 900,
                        color: 'rgb(0, 143, 251)'
                    }
                }
            },
            // 线性
            {
                min: 1000000,
                max: 500000000,
                opposite: true,
                tickAmount: 4,
                seriesName: '线性',
                labels: {
                    formatter: labelFormatter,
                    style: {
                        fontWeight: 900,
                        colors: 'rgb(0, 227, 150)'
                    }
                },
                title: {
                    text: '线性',
                    style: {
                        fontWeight: 900,
                        color: 'rgb(0, 227, 150)'
                    }
                }
            }
        ]
    }

    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

实时动态折线图

import ApexChart from 'react-apexcharts';
import {useEffect} from "react";

// 重置随机数种子
let _seed = 42;
Math.random = function () {
    _seed = _seed * 16807 % 2147483647;
    return (_seed - 1) / 2147483646;
};

// 最后时间
let lastDate = 0;
// 数据
let data = []
// 间隔时间
let TICKINTERVAL = 86400000
// x轴范围
let XAXISRANGE = 777600000

// 获取时间序列
function getDayWiseTimeSeries(baseval, count, yrange) {
    let i = 0;
    while (i < count) {
        let x = baseval;
        let y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

        data.push({
            x, y
        });
        lastDate = baseval
        baseval += TICKINTERVAL;
        i++;
    }
}

getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
    min: 10,
    max: 90
})

function getNewSeries(baseval, yrange) {
    let newDate = baseval + TICKINTERVAL;
    lastDate = newDate

    for (let i = 0; i < data.length - 10; i++) {
        // IMPORTANT
        // we reset the x and y of the data which is out of drawing area
        // to prevent memory leaks
        data[i].x = newDate - XAXISRANGE - TICKINTERVAL
        data[i].y = 0
    }

    data.push({
        x: newDate,
        y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
    })
}

function resetData() {
    data = data.slice(data.length - 10, data.length);
}

export function RealtimeLine() {
    // 初始化
    useEffect(() => {
        window.setInterval(() => {
            getNewSeries(lastDate, {
                min: 10,
                max: 90
            })

            ApexCharts.exec('realtime', 'updateSeries', [{
                data: data
            }])
        }, 1000)
    }, [])

    // 数据序列
    const series = [
        {
            data: data.slice()
        }
    ]
    // 图表选项
    const options = {
        chart: {
            id: 'realtime',
            height: 350,
            type: 'line',
            animations: {
                enabled: true,
                easing: 'linear',
                dynamicAnimation: {
                    speed: 1000
                }
            },
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth'
        },
        title: {
            text: 'Dynamic Updating Chart',
            align: 'left'
        },
        markers: {
            size: 0
        },
        xaxis: {
            type: 'datetime',
            range: XAXISRANGE,
        },
        yaxis: {
            max: 100
        },
        legend: {
            show: false
        },
    }

    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

数据缩放

import ApexChart from 'react-apexcharts';
import {useEffect} from "react";

// 重置随机数种子
let _seed = 42;
Math.random = function () {
    _seed = _seed * 16807 % 2147483647;
    return (_seed - 1) / 2147483646;
};

// 序列数据
let dataSeries = [
    [
        {
            "date": "2014-01-01",
            "value": 20000000
        },
        {
            "date": "2014-01-02",
            "value": 10379978
        },
        {
            "date": "2014-01-03",
            "value": 30493749
        },
        {
            "date": "2014-01-04",
            "value": 10785250
        },
        {
            "date": "2014-01-05",
            "value": 33901904
        },
        {
            "date": "2014-01-06",
            "value": 11576838
        },
        {
            "date": "2014-01-07",
            "value": 14413854
        },
        {
            "date": "2014-01-08",
            "value": 15177211
        },
        {
            "date": "2014-01-09",
            "value": 16622100
        },
        {
            "date": "2014-01-10",
            "value": 17381072
        },
        {
            "date": "2014-01-11",
            "value": 18802310
        },
        {
            "date": "2014-01-12",
            "value": 15531790
        },
        {
            "date": "2014-01-13",
            "value": 15748881
        },
        {
            "date": "2014-01-14",
            "value": 18706437
        },
        {
            "date": "2014-01-15",
            "value": 19752685
        },
        {
            "date": "2014-01-16",
            "value": 21016418
        },
        {
            "date": "2014-01-17",
            "value": 25622924
        },
        {
            "date": "2014-01-18",
            "value": 25337480
        },
        {
            "date": "2014-01-19",
            "value": 22258882
        },
        {
            "date": "2014-01-20",
            "value": 23829538
        },
        {
            "date": "2014-01-21",
            "value": 24245689
        },
        {
            "date": "2014-01-22",
            "value": 26429711
        },
        {
            "date": "2014-01-23",
            "value": 26259017
        },
        {
            "date": "2014-01-24",
            "value": 25396183
        },
        {
            "date": "2014-01-25",
            "value": 23107346
        },
        {
            "date": "2014-01-26",
            "value": 28659852
        },
        {
            "date": "2014-01-27",
            "value": 25270783
        },
        {
            "date": "2014-01-28",
            "value": 26270783
        },
        {
            "date": "2014-01-29",
            "value": 27270783
        },
        {
            "date": "2014-01-30",
            "value": 28270783
        },
        {
            "date": "2014-01-31",
            "value": 29270783
        },
        {
            "date": "2014-02-01",
            "value": 30270783
        },
        {
            "date": "2014-02-02",
            "value": 31270783
        },
        {
            "date": "2014-02-03",
            "value": 32270783
        },
        {
            "date": "2014-02-04",
            "value": 33270783
        },
        {
            "date": "2014-02-05",
            "value": 28270783
        },
        {
            "date": "2014-02-06",
            "value": 27270783
        },
        {
            "date": "2014-02-07",
            "value": 35270783
        },
        {
            "date": "2014-02-08",
            "value": 34270783
        },
        {
            "date": "2014-02-09",
            "value": 28270783
        },
        {
            "date": "2014-02-10",
            "value": 35270783
        },
        {
            "date": "2014-02-11",
            "value": 36270783
        },
        {
            "date": "2014-02-12",
            "value": 34127078
        },
        {
            "date": "2014-02-13",
            "value": 33124078
        },
        {
            "date": "2014-02-14",
            "value": 36227078
        },
        {
            "date": "2014-02-15",
            "value": 37827078
        },
        {
            "date": "2014-02-16",
            "value": 36427073
        },
        {
            "date": "2014-02-17",
            "value": 37570783
        },
        {
            "date": "2014-02-18",
            "value": 38627073
        },
        {
            "date": "2014-02-19",
            "value": 37727078
        },
        {
            "date": "2014-02-20",
            "value": 38827073
        },
        {
            "date": "2014-02-21",
            "value": 40927078
        },
        {
            "date": "2014-02-22",
            "value": 41027078
        },
        {
            "date": "2014-02-23",
            "value": 42127073
        },
        {
            "date": "2014-02-24",
            "value": 43220783
        },
        {
            "date": "2014-02-25",
            "value": 44327078
        },
        {
            "date": "2014-02-26",
            "value": 40427078
        },
        {
            "date": "2014-02-27",
            "value": 41027078
        },
        {
            "date": "2014-02-28",
            "value": 45627078
        },
        {
            "date": "2014-03-01",
            "value": 44727078
        },
        {
            "date": "2014-03-02",
            "value": 44227078
        },
        {
            "date": "2014-03-03",
            "value": 45227078
        },
        {
            "date": "2014-03-04",
            "value": 46027078
        },
        {
            "date": "2014-03-05",
            "value": 46927078
        },
        {
            "date": "2014-03-06",
            "value": 47027078
        },
        {
            "date": "2014-03-07",
            "value": 46227078
        },
        {
            "date": "2014-03-08",
            "value": 47027078
        },
        {
            "date": "2014-03-09",
            "value": 48027078
        },
        {
            "date": "2014-03-10",
            "value": 47027078
        },
        {
            "date": "2014-03-11",
            "value": 47027078
        },
        {
            "date": "2014-03-12",
            "value": 48017078
        },
        {
            "date": "2014-03-13",
            "value": 48077078
        },
        {
            "date": "2014-03-14",
            "value": 48087078
        },
        {
            "date": "2014-03-15",
            "value": 48017078
        },
        {
            "date": "2014-03-16",
            "value": 48047078
        },
        {
            "date": "2014-03-17",
            "value": 48067078
        },
        {
            "date": "2014-03-18",
            "value": 48077078
        },
        {
            "date": "2014-03-19",
            "value": 48027074
        },
        {
            "date": "2014-03-20",
            "value": 48927079
        },
        {
            "date": "2014-03-21",
            "value": 48727071
        },
        {
            "date": "2014-03-22",
            "value": 48127072
        },
        {
            "date": "2014-03-23",
            "value": 48527072
        },
        {
            "date": "2014-03-24",
            "value": 48627027
        },
        {
            "date": "2014-03-25",
            "value": 48027040
        },
        {
            "date": "2014-03-26",
            "value": 48027043
        },
        {
            "date": "2014-03-27",
            "value": 48057022
        },
        {
            "date": "2014-03-28",
            "value": 49057022
        },
        {
            "date": "2014-03-29",
            "value": 50057022
        },
        {
            "date": "2014-03-30",
            "value": 51057022
        },
        {
            "date": "2014-03-31",
            "value": 52057022
        },
        {
            "date": "2014-04-01",
            "value": 53057022
        },
        {
            "date": "2014-04-02",
            "value": 54057022
        },
        {
            "date": "2014-04-03",
            "value": 52057022
        },
        {
            "date": "2014-04-04",
            "value": 55057022
        },
        {
            "date": "2014-04-05",
            "value": 58270783
        },
        {
            "date": "2014-04-06",
            "value": 56270783
        },
        {
            "date": "2014-04-07",
            "value": 55270783
        },
        {
            "date": "2014-04-08",
            "value": 58270783
        },
        {
            "date": "2014-04-09",
            "value": 59270783
        },
        {
            "date": "2014-04-10",
            "value": 60270783
        },
        {
            "date": "2014-04-11",
            "value": 61270783
        },
        {
            "date": "2014-04-12",
            "value": 62270783
        },
        {
            "date": "2014-04-13",
            "value": 63270783
        },
        {
            "date": "2014-04-14",
            "value": 64270783
        },
        {
            "date": "2014-04-15",
            "value": 65270783
        },
        {
            "date": "2014-04-16",
            "value": 66270783
        },
        {
            "date": "2014-04-17",
            "value": 67270783
        },
        {
            "date": "2014-04-18",
            "value": 68270783
        },
        {
            "date": "2014-04-19",
            "value": 69270783
        },
        {
            "date": "2014-04-20",
            "value": 70270783
        },
        {
            "date": "2014-04-21",
            "value": 71270783
        },
        {
            "date": "2014-04-22",
            "value": 72270783
        },
        {
            "date": "2014-04-23",
            "value": 73270783
        },
        {
            "date": "2014-04-24",
            "value": 74270783
        },
        {
            "date": "2014-04-25",
            "value": 75270783
        },
        {
            "date": "2014-04-26",
            "value": 76660783
        },
        {
            "date": "2014-04-27",
            "value": 77270783
        },
        {
            "date": "2014-04-28",
            "value": 78370783
        },
        {
            "date": "2014-04-29",
            "value": 79470783
        },
        {
            "date": "2014-04-30",
            "value": 80170783
        }
    ],
    [{
        "date": "2014-01-01",
        "value": 150000000
    },
        {
            "date": "2014-01-02",
            "value": 160379978
        },
        {
            "date": "2014-01-03",
            "value": 170493749
        },
        {
            "date": "2014-01-04",
            "value": 160785250
        },
        {
            "date": "2014-01-05",
            "value": 167391904
        },
        {
            "date": "2014-01-06",
            "value": 161576838
        },
        {
            "date": "2014-01-07",
            "value": 161413854
        },
        {
            "date": "2014-01-08",
            "value": 152177211
        },
        {
            "date": "2014-01-09",
            "value": 140762210
        },
        {
            "date": "2014-01-10",
            "value": 144381072
        },
        {
            "date": "2014-01-11",
            "value": 154352310
        },
        {
            "date": "2014-01-12",
            "value": 165531790
        },
        {
            "date": "2014-01-13",
            "value": 175748881
        },
        {
            "date": "2014-01-14",
            "value": 187064037
        },
        {
            "date": "2014-01-15",
            "value": 197520685
        },
        {
            "date": "2014-01-16",
            "value": 210176418
        },
        {
            "date": "2014-01-17",
            "value": 196122924
        },
        {
            "date": "2014-01-18",
            "value": 207337480
        },
        {
            "date": "2014-01-19",
            "value": 200258882
        },
        {
            "date": "2014-01-20",
            "value": 186829538
        },
        {
            "date": "2014-01-21",
            "value": 192456897
        },
        {
            "date": "2014-01-22",
            "value": 204299711
        },
        {
            "date": "2014-01-23",
            "value": 192759017
        },
        {
            "date": "2014-01-24",
            "value": 203596183
        },
        {
            "date": "2014-01-25",
            "value": 208107346
        },
        {
            "date": "2014-01-26",
            "value": 196359852
        },
        {
            "date": "2014-01-27",
            "value": 192570783
        },
        {
            "date": "2014-01-28",
            "value": 177967768
        },
        {
            "date": "2014-01-29",
            "value": 190632803
        },
        {
            "date": "2014-01-30",
            "value": 203725316
        },
        {
            "date": "2014-01-31",
            "value": 218226177
        },
        {
            "date": "2014-02-01",
            "value": 210698669
        },
        {
            "date": "2014-02-02",
            "value": 217640656
        },
        {
            "date": "2014-02-03",
            "value": 216142362
        },
        {
            "date": "2014-02-04",
            "value": 201410971
        },
        {
            "date": "2014-02-05",
            "value": 196704289
        },
        {
            "date": "2014-02-06",
            "value": 190436945
        },
        {
            "date": "2014-02-07",
            "value": 178891686
        },
        {
            "date": "2014-02-08",
            "value": 171613962
        },
        {
            "date": "2014-02-09",
            "value": 157579773
        },
        {
            "date": "2014-02-10",
            "value": 158677098
        },
        {
            "date": "2014-02-11",
            "value": 147129977
        },
        {
            "date": "2014-02-12",
            "value": 151561876
        },
        {
            "date": "2014-02-13",
            "value": 151627421
        },
        {
            "date": "2014-02-14",
            "value": 143543872
        },
        {
            "date": "2014-02-15",
            "value": 136581057
        },
        {
            "date": "2014-02-16",
            "value": 135560715
        },
        {
            "date": "2014-02-17",
            "value": 122625263
        },
        {
            "date": "2014-02-18",
            "value": 112091484
        },
        {
            "date": "2014-02-19",
            "value": 98810329
        },
        {
            "date": "2014-02-20",
            "value": 99882912
        },
        {
            "date": "2014-02-21",
            "value": 94943095
        },
        {
            "date": "2014-02-22",
            "value": 104875743
        },
        {
            "date": "2014-02-23",
            "value": 116383678
        },
        {
            "date": "2014-02-24",
            "value": 125028841
        },
        {
            "date": "2014-02-25",
            "value": 123967310
        },
        {
            "date": "2014-02-26",
            "value": 133167029
        },
        {
            "date": "2014-02-27",
            "value": 128577263
        },
        {
            "date": "2014-02-28",
            "value": 115836969
        },
        {
            "date": "2014-03-01",
            "value": 119264529
        },
        {
            "date": "2014-03-02",
            "value": 109363374
        },
        {
            "date": "2014-03-03",
            "value": 113985628
        },
        {
            "date": "2014-03-04",
            "value": 114650999
        },
        {
            "date": "2014-03-05",
            "value": 110866108
        },
        {
            "date": "2014-03-06",
            "value": 96473454
        },
        {
            "date": "2014-03-07",
            "value": 104075886
        },
        {
            "date": "2014-03-08",
            "value": 103568384
        },
        {
            "date": "2014-03-09",
            "value": 101534883
        },
        {
            "date": "2014-03-10",
            "value": 115825447
        },
        {
            "date": "2014-03-11",
            "value": 126133916
        },
        {
            "date": "2014-03-12",
            "value": 116502109
        },
        {
            "date": "2014-03-13",
            "value": 130169411
        },
        {
            "date": "2014-03-14",
            "value": 124296886
        },
        {
            "date": "2014-03-15",
            "value": 126347399
        },
        {
            "date": "2014-03-16",
            "value": 131483669
        },
        {
            "date": "2014-03-17",
            "value": 142811333
        },
        {
            "date": "2014-03-18",
            "value": 129675396
        },
        {
            "date": "2014-03-19",
            "value": 115514483
        },
        {
            "date": "2014-03-20",
            "value": 117630630
        },
        {
            "date": "2014-03-21",
            "value": 122340239
        },
        {
            "date": "2014-03-22",
            "value": 132349091
        },
        {
            "date": "2014-03-23",
            "value": 125613305
        },
        {
            "date": "2014-03-24",
            "value": 135592466
        },
        {
            "date": "2014-03-25",
            "value": 123408762
        },
        {
            "date": "2014-03-26",
            "value": 111991454
        },
        {
            "date": "2014-03-27",
            "value": 116123955
        },
        {
            "date": "2014-03-28",
            "value": 112817214
        },
        {
            "date": "2014-03-29",
            "value": 113029590
        },
        {
            "date": "2014-03-30",
            "value": 108753398
        },
        {
            "date": "2014-03-31",
            "value": 99383763
        },
        {
            "date": "2014-04-01",
            "value": 100151737
        },
        {
            "date": "2014-04-02",
            "value": 94985209
        },
        {
            "date": "2014-04-03",
            "value": 82913669
        },
        {
            "date": "2014-04-04",
            "value": 78748268
        },
        {
            "date": "2014-04-05",
            "value": 63829135
        },
        {
            "date": "2014-04-06",
            "value": 78694727
        },
        {
            "date": "2014-04-07",
            "value": 80868994
        },
        {
            "date": "2014-04-08",
            "value": 93799013
        },
        {
            "date": "2014-04-09",
            "value": 99042416
        },
        {
            "date": "2014-04-10",
            "value": 97298692
        },
        {
            "date": "2014-04-11",
            "value": 83353499
        },
        {
            "date": "2014-04-12",
            "value": 71248129
        },
        {
            "date": "2014-04-13",
            "value": 75253744
        },
        {
            "date": "2014-04-14",
            "value": 68976648
        },
        {
            "date": "2014-04-15",
            "value": 71002284
        },
        {
            "date": "2014-04-16",
            "value": 75052401
        },
        {
            "date": "2014-04-17",
            "value": 83894030
        },
        {
            "date": "2014-04-18",
            "value": 90236528
        },
        {
            "date": "2014-04-19",
            "value": 99739114
        },
        {
            "date": "2014-04-20",
            "value": 96407136
        },
        {
            "date": "2014-04-21",
            "value": 108323177
        },
        {
            "date": "2014-04-22",
            "value": 101578914
        },
        {
            "date": "2014-04-23",
            "value": 115877608
        },
        {
            "date": "2014-04-24",
            "value": 112088857
        },
        {
            "date": "2014-04-25",
            "value": 112071353
        },
        {
            "date": "2014-04-26",
            "value": 101790062
        },
        {
            "date": "2014-04-27",
            "value": 115003761
        },
        {
            "date": "2014-04-28",
            "value": 120457727
        },
        {
            "date": "2014-04-29",
            "value": 118253926
        },
        {
            "date": "2014-04-30",
            "value": 117956992
        }
    ],
    [{
        "date": "2014-01-01",
        "value": 50000000
    },
        {
            "date": "2014-01-02",
            "value": 60379978
        },
        {
            "date": "2014-01-03",
            "value": 40493749
        },
        {
            "date": "2014-01-04",
            "value": 60785250
        },
        {
            "date": "2014-01-05",
            "value": 67391904
        },
        {
            "date": "2014-01-06",
            "value": 61576838
        },
        {
            "date": "2014-01-07",
            "value": 61413854
        },
        {
            "date": "2014-01-08",
            "value": 82177211
        },
        {
            "date": "2014-01-09",
            "value": 103762210
        },
        {
            "date": "2014-01-10",
            "value": 84381072
        },
        {
            "date": "2014-01-11",
            "value": 54352310
        },
        {
            "date": "2014-01-12",
            "value": 65531790
        },
        {
            "date": "2014-01-13",
            "value": 75748881
        },
        {
            "date": "2014-01-14",
            "value": 47064037
        },
        {
            "date": "2014-01-15",
            "value": 67520685
        },
        {
            "date": "2014-01-16",
            "value": 60176418
        },
        {
            "date": "2014-01-17",
            "value": 66122924
        },
        {
            "date": "2014-01-18",
            "value": 57337480
        },
        {
            "date": "2014-01-19",
            "value": 100258882
        },
        {
            "date": "2014-01-20",
            "value": 46829538
        },
        {
            "date": "2014-01-21",
            "value": 92456897
        },
        {
            "date": "2014-01-22",
            "value": 94299711
        },
        {
            "date": "2014-01-23",
            "value": 62759017
        },
        {
            "date": "2014-01-24",
            "value": 103596183
        },
        {
            "date": "2014-01-25",
            "value": 108107346
        },
        {
            "date": "2014-01-26",
            "value": 66359852
        },
        {
            "date": "2014-01-27",
            "value": 62570783
        },
        {
            "date": "2014-01-28",
            "value": 77967768
        },
        {
            "date": "2014-01-29",
            "value": 60632803
        },
        {
            "date": "2014-01-30",
            "value": 103725316
        },
        {
            "date": "2014-01-31",
            "value": 98226177
        },
        {
            "date": "2014-02-01",
            "value": 60698669
        },
        {
            "date": "2014-02-02",
            "value": 67640656
        },
        {
            "date": "2014-02-03",
            "value": 66142362
        },
        {
            "date": "2014-02-04",
            "value": 101410971
        },
        {
            "date": "2014-02-05",
            "value": 66704289
        },
        {
            "date": "2014-02-06",
            "value": 60436945
        },
        {
            "date": "2014-02-07",
            "value": 78891686
        },
        {
            "date": "2014-02-08",
            "value": 71613962
        },
        {
            "date": "2014-02-09",
            "value": 107579773
        },
        {
            "date": "2014-02-10",
            "value": 58677098
        },
        {
            "date": "2014-02-11",
            "value": 87129977
        },
        {
            "date": "2014-02-12",
            "value": 51561876
        },
        {
            "date": "2014-02-13",
            "value": 51627421
        },
        {
            "date": "2014-02-14",
            "value": 83543872
        },
        {
            "date": "2014-02-15",
            "value": 66581057
        },
        {
            "date": "2014-02-16",
            "value": 65560715
        },
        {
            "date": "2014-02-17",
            "value": 62625263
        },
        {
            "date": "2014-02-18",
            "value": 92091484
        },
        {
            "date": "2014-02-19",
            "value": 48810329
        },
        {
            "date": "2014-02-20",
            "value": 49882912
        },
        {
            "date": "2014-02-21",
            "value": 44943095
        },
        {
            "date": "2014-02-22",
            "value": 104875743
        },
        {
            "date": "2014-02-23",
            "value": 96383678
        },
        {
            "date": "2014-02-24",
            "value": 105028841
        },
        {
            "date": "2014-02-25",
            "value": 63967310
        },
        {
            "date": "2014-02-26",
            "value": 63167029
        },
        {
            "date": "2014-02-27",
            "value": 68577263
        },
        {
            "date": "2014-02-28",
            "value": 95836969
        },
        {
            "date": "2014-03-01",
            "value": 99264529
        },
        {
            "date": "2014-03-02",
            "value": 109363374
        },
        {
            "date": "2014-03-03",
            "value": 93985628
        },
        {
            "date": "2014-03-04",
            "value": 94650999
        },
        {
            "date": "2014-03-05",
            "value": 90866108
        },
        {
            "date": "2014-03-06",
            "value": 46473454
        },
        {
            "date": "2014-03-07",
            "value": 84075886
        },
        {
            "date": "2014-03-08",
            "value": 103568384
        },
        {
            "date": "2014-03-09",
            "value": 101534883
        },
        {
            "date": "2014-03-10",
            "value": 95825447
        },
        {
            "date": "2014-03-11",
            "value": 66133916
        },
        {
            "date": "2014-03-12",
            "value": 96502109
        },
        {
            "date": "2014-03-13",
            "value": 80169411
        },
        {
            "date": "2014-03-14",
            "value": 84296886
        },
        {
            "date": "2014-03-15",
            "value": 86347399
        },
        {
            "date": "2014-03-16",
            "value": 31483669
        },
        {
            "date": "2014-03-17",
            "value": 82811333
        },
        {
            "date": "2014-03-18",
            "value": 89675396
        },
        {
            "date": "2014-03-19",
            "value": 95514483
        },
        {
            "date": "2014-03-20",
            "value": 97630630
        },
        {
            "date": "2014-03-21",
            "value": 62340239
        },
        {
            "date": "2014-03-22",
            "value": 62349091
        },
        {
            "date": "2014-03-23",
            "value": 65613305
        },
        {
            "date": "2014-03-24",
            "value": 65592466
        },
        {
            "date": "2014-03-25",
            "value": 63408762
        },
        {
            "date": "2014-03-26",
            "value": 91991454
        },
        {
            "date": "2014-03-27",
            "value": 96123955
        },
        {
            "date": "2014-03-28",
            "value": 92817214
        },
        {
            "date": "2014-03-29",
            "value": 93029590
        },
        {
            "date": "2014-03-30",
            "value": 108753398
        },
        {
            "date": "2014-03-31",
            "value": 49383763
        },
        {
            "date": "2014-04-01",
            "value": 100151737
        },
        {
            "date": "2014-04-02",
            "value": 44985209
        },
        {
            "date": "2014-04-03",
            "value": 52913669
        },
        {
            "date": "2014-04-04",
            "value": 48748268
        },
        {
            "date": "2014-04-05",
            "value": 23829135
        },
        {
            "date": "2014-04-06",
            "value": 58694727
        },
        {
            "date": "2014-04-07",
            "value": 50868994
        },
        {
            "date": "2014-04-08",
            "value": 43799013
        },
        {
            "date": "2014-04-09",
            "value": 4042416
        },
        {
            "date": "2014-04-10",
            "value": 47298692
        },
        {
            "date": "2014-04-11",
            "value": 53353499
        },
        {
            "date": "2014-04-12",
            "value": 71248129
        },
        {
            "date": "2014-04-13",
            "value": 75253744
        },
        {
            "date": "2014-04-14",
            "value": 68976648
        },
        {
            "date": "2014-04-15",
            "value": 71002284
        },
        {
            "date": "2014-04-16",
            "value": 75052401
        },
        {
            "date": "2014-04-17",
            "value": 83894030
        },
        {
            "date": "2014-04-18",
            "value": 50236528
        },
        {
            "date": "2014-04-19",
            "value": 59739114
        },
        {
            "date": "2014-04-20",
            "value": 56407136
        },
        {
            "date": "2014-04-21",
            "value": 108323177
        },
        {
            "date": "2014-04-22",
            "value": 101578914
        },
        {
            "date": "2014-04-23",
            "value": 95877608
        },
        {
            "date": "2014-04-24",
            "value": 62088857
        },
        {
            "date": "2014-04-25",
            "value": 92071353
        },
        {
            "date": "2014-04-26",
            "value": 81790062
        },
        {
            "date": "2014-04-27",
            "value": 105003761
        },
        {
            "date": "2014-04-28",
            "value": 100457727
        },
        {
            "date": "2014-04-29",
            "value": 98253926
        },
        {
            "date": "2014-04-30",
            "value": 67956992
        }
    ]
]

// 日期数据
let ts2 = 1484418600000;
let dates = [];
for (let i = 0; i < 120; i++) {
    ts2 = ts2 + 86400000;
    let innerArr = [ts2, dataSeries[1][i].value];
    dates.push(innerArr)
}

export function ZoomableTimeseries() {
    // 数据序列
    const series = [
        {
            name: 'XYZ MOTORS',
            data: dates
        }
    ]
    // 图表选项
    const options = {
        // 图表配置
        chart: {
            type: 'area',
            stacked: false,
            height: 350,
            // 配置缩放
            zoom: {
                type: 'x',
                enabled: true,
                autoScaleYaxis: true
            },
            // 工具栏配置
            toolbar: {
                autoSelected: 'zoom'
            }
        },
        dataLabels: {
            enabled: false
        },
        markers: {
            size: 0,
        },
        title: {
            text: '股票价格变动',
            align: 'left'
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 0,
                stops: [0, 90, 100]
            },
        },
        yaxis: {
            labels: {
                formatter: function (val) {
                    return (val / 1000000).toFixed(0);
                },
            },
            title: {
                text: '价格'
            },
        },
        xaxis: {
            type: 'datetime',
        },
        tooltip: {
            shared: false,
            y: {
                formatter: function (val) {
                    return (val / 1000000).toFixed(0)
                }
            }
        }
    }

    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="line" height={540}/>
        </div>
    )
}

在这里插入图片描述

Python私教
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-apexcharts:Ap用于ApexCharts的React组件
05-11
用于React.js包装器可在中构建交互式可视化。 下载及安装 通过npm安装 npm install react-apexcharts apexcharts 用法 import Chart from 'react-apexcharts' 要以最少的配置创建基本的条形图，请编写如下： class App extends Component { constructor ( props ) { super ( props ) ; this . state = { options : { chart : { id : 'apexchart-example' } , xaxis : { categories : [ 1991 , 1992 , 1993 , 1994 , 19
Ap用于ApexCharts的React组件-React开发
05-27
用于ApexCharts的React.js包装器可在react中构建交互式可视化。 下载和安装通过npm安装npm install react-apexcharts apexcharts用法导入来自ApexCharts的React.js包装器图表，以在react中构建交互式可视化。 下载和安装通过npm安装npm install react-apexcharts apexcharts用法从“ react-apexcharts”导入图表要创建具有最小配置的基本条形图，请编写如下： this.state = {选项：{图表：{id：'apexchart-example'}，xaxis：{categori
推荐：React-ApexCharts - 交互式可视化图表库
gitblog_00088的博客
05-14 306
推荐：React-ApexCharts - 交互式可视化图表库 项目地址:https://gitcode.com/apexcharts/react-apexcharts React-ApexCharts 是一个基于 ApexCharts.js 的 React 组件，专为构建动态数据可视化而设计。这个强大的库提供了丰富的图表类型和高度可定制的选项，让在 React 应用中创建美观且互动的图表变得轻...
react-reactapexcharts用于在Reactjs中创建交互式SVG图表
08-15
react-apexcharts：用于在React.js中创建交互式SVG图表(对ApexCharts进行封装)
Echarts折线图，根据时间条件查询动态数据
热门推荐
qq_43028942的博客
10-12 1万+
Echarts折线图，根据时间条件查询动态数据 这是我第一次接触到Echarts，所以写个小总结。（Echarts官网上有很多实例，还有教程。Echarts官网实例地址） 我写的是，根据开始时间和结束时间这两个条件去查询数据，并且用到Tab转换，一个用table表格展示数据，一个是Echarts折线图展示动态数据。 Tab转换直接在HTML中写就可以了。 HTML： &lt;body&gt; ...
React中使用echarts绘制图表
林仔520的博客
05-28 8248
我们都知道，Echarts图表功能非常强大，使用起来也很方便，我们的项目中就用到了Echarts，现在笔者就带大家看看怎么在react中使用Echarts。 我们要想在react项目中高效使用echarts，建议大家安装echarts-for-react,它是一个简单的 echarts(v3.0)的 react 封装。在我们实际项目中使用非常简单。 如果是在react项目中使用图表，大家也可以使用bizcharts绘制图表，因为它是完全为react开发的，所以使用起来更容易上手。BizCharts 是一..
数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
LIMI_伞梦的博客
01-08 1743
Polar Area——（极地图） 极地面积图类似于饼图，但每个线段具有相同的角度 - 线段的半径因值而异。当我们想要显示类似于饼图的比较数据，同时也要显示上下文的值的范围时通常使用这种类型的图表。 官方文档：https://www.chartjs.org/docs/latest/charts/polar.html 示例用法 new Chart(ctx, { data: data, type: “polarArea”, options: options }); 图表属性（博主这边只列举看出了比较常用和
14个值得收藏的精品开源JavaScript数据可视化库
CRMEB小程序商城的博客
12-16 1065
你的程序有多么依赖数据？即使应用程序不完全面向业务，你也可能需要管理面板、仪表板、性能跟踪以及用户非常喜欢的类似分析功能的数据。 对于 JS 对开发人员来说，可视化数据的能力与制作交互式网页一样有价值。特别是两者经常同时出现。随着 JavaScript 随着数据可视化领域的不断普及，市场上甚至还会出现能够为 Web 创建漂亮图表的新库。 我们选择了14个用于数据可视化的 JavaScript 库（这些库目前是最受欢迎或最有趣的）并做了一些研究，看看哪个最适合我们的项目。在这里要考虑许多因素： ..
《数据结构》课程设计-排序算法可视化
weixin_43906149的博客
06-11 3339
《数据结构》课程设计-js实现排序算法可视化 一.数据可视化 1.什么是数据可视化 数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。然而，设计人员往往并不能很好地把握设计与功能之间的平衡，从而创造出华而不实的数据可视化形式，无法达到其主要目的，也就是
基于React和Echart的数据可视化大屏开源项目
03-25
项目概述：本项目是一款基于React和Echart技术的开源数据可视化大屏应用，主要采用TypeScript进行开发，辅以JavaScript、CSS和HTML等语言。项目包含616个文件，其中主要包括385个JSON配置文件，95个PNG图像资源，...
基于REACT和AXIOS的可视化界面拖拽系统
02-10
组件化、可扩展到大屏和IPTV应用界面，界面布局自由拖拽，数据自由配置，支持调数据接口。
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。...
❤开箱即用❤react+echart数据可视化大屏展示
12-30
❤开箱即用❤react+echart数据可视化大屏展示
JavaScript 可视化框架汇总
缘如风的博客
05-02 3576
JavaScript 可视化框架汇总
如何挑选数据可视化框架及平台 - 前端篇
qq_34527715的博客
07-08 1957
数据可视化是个很火的领域，如果在 Github 上搜索 chart 会发现有7.6w个结果，大量看起来功能类似的图表库，如何在这么多项目中选择适合自己的？因为做 BI 产品Sugar的缘故，我们曾经花费了大量时间了解各种可视化库，接下来将分享我们在这方面的经验，帮助你做出更好的选择。 首先我们将数据可视化分成两种大的类型： 可视化库，比如 D3、Echarts 等，这些是面向开发者的，开发者可以基于这些库开发可视化应用。 可视化平台，比如 Grafana、Superset 等，这些面向分析师和...
分享10+可视图表库, 助你轻松制作精美可视化大屏
趣谈前端
03-20 463
前言在开发可视化项目的过程中往往涉及到可视化图表, 我们看到的很多酷炫的报表, 大屏, 都用了非常多的图表, 接下来我和大家分享一些比较流行的开源免费的图表库.来源: 趣谈前端公众号github: https://github.com/MrXujiang1.D3.jsD3 全称（Data-Driven Documents），一个被数据驱动的图表库。由 JavaScript 开发 ，它能大大减小我们...
常用的五大数据可视化工具测评分享
最新发布
qq_43696218的博客
06-12 561
然而，对于复杂的数据分析和高级计算功能，帆软BI的操作相对繁琐，需要用户具备一定的技术背景。奥威BI提供了直观的数据可视化图表和强大的数据钻取功能，用户可以通过简单的操作深入挖掘数据背后的业务含义。然而，由于功能的复杂性，亿信华辰BI的学习成本相对较高。本文将对帆软BI、奥威BI、思迈特BI、永洪BI以及亿信华辰BI这五大数据可视化工具进行详细的操作体验测评，总结它们的特点和优势。永洪BI提供了丰富的可视化数据图表组件和多种内置的风格样式，用户可以通过简单的拖拽操作快速构建数据可视化报表。
数据可视化用react的案例
07-12
当使用React进行数据可视化时，可以借助一些流行的图表库来实现，例如： 1. Recharts：Recharts是一个基于React和D3的图表库，提供了多种常见的图表类型，如折线图、柱状图、饼图等。你可以使用Recharts来根据接口返回的数据生成动态的图表。 2. Chart.js：Chart.js是一个简单灵活的图表库，也可以与React结合使用。它支持多种图表类型，并提供了丰富的配置选项，可以根据接口数据自定义图表样式。 3. D3.js：D3.js是一个强大的数据可视化库，可以创建各种复杂的图表和可视化效果。虽然D3.js本身不是React专用的，但你可以通过React的生命周期方法和钩子函数来结合使用，实现与接口数据的交互。 下面是一个使用Recharts库的简单示例： ```jsx import React, { useState, useEffect } from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; function App() { const [data, setData] = useState([]); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); const result = await response.json(); setData(result); } catch (error) { console.error('Error fetching data:', error); } }; return ( <div> <LineChart width={500} height={300} data={data}> <XAxis dataKey="date" /> <YAxis /> <CartesianGrid stroke="#eee" /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="value" stroke="#8884d8" /> </LineChart> </div> ); } export default App; ``` 在上面的代码中，我们使用了Recharts库来创建一个折线图。通过调用接口获取数据后，将数据传递给`LineChart`组件，然后使用`Line`组件来指定要绘制的数据线。 当然，这只是一个简单的示例，你可以根据自己的需求和实际数据进行定制和扩展。同时，你需要替换示例代码中的接口URL为你实际的接口地址，并根据接口返回的数据结构来配置图表。 希望这个示例对你有帮助！如果你有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Python私教

创业不易，请打赏支持我一点吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值