React18 apexcharts数据可视化之折线图

基础折线图

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 = basevalbaseval += TICKINTERVAL;i++;}
}getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {min: 10,max: 90
})function getNewSeries(baseval, yrange) {let newDate = baseval + TICKINTERVAL;lastDate = newDatefor (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 leaksdata[i].x = newDate - XAXISRANGE - TICKINTERVALdata[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>)
}

在这里插入图片描述