React中使用ECharts

来源：互联网发布：网络赌骰宝大小的技巧编辑：程序博客网时间：2024/05/18 19:22

使用node.js的npm命令安装：

npm install echarts --save

ECharts就被下载到项目中的node_modules文件夹中，这个时候我们就可以在编写的react组件中使用ECharts了

import React, { Component } from 'react';// 引入 ECharts 主模块import echarts from 'echarts/dist/echarts.common';// 引入折线图import  'echarts/lib/chart/line';// 引入提示框和标题组件import 'echarts/lib/component/tooltip';import 'echarts/lib/component/title';export default class EchartsTest extends Component {    componentDidMount() {        var base = +new Date(1968, 9, 3);        var oneDay = 24 * 3600 * 1000;        var date = [];        var data = [Math.random() * 300];        for (var i = 1; i < 20000; i++) {            var now = new Date(base += oneDay);            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));        }        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        // 绘制图表        myChart.setOption({            tooltip: {                trigger: 'axis',                position: function (pt) {                    return [pt[0], '10%'];                }            },            title: {                left: 'center',                text: '大数据量面积图',            },            toolbox: {                feature: {                    dataZoom: {                        yAxisIndex: 'none'                    },                    restore: {},                    saveAsImage: {}                }            },            xAxis: {                type: 'category',                boundaryGap: false,                data: date            },            yAxis: {                type: 'value',                boundaryGap: [0, '100%']            },            dataZoom: [{                type: 'inside',                start: 0,                end: 10            }, {                start: 0,                end: 10,                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',                handleSize: '80%',                handleStyle: {                    color: '#fff',                    shadowBlur: 3,                    shadowColor: 'rgba(0, 0, 0, 0.6)',                    shadowOffsetX: 2,                    shadowOffsetY: 2                }            }],            series: [                {                    name:'模拟数据',                    type:'line',                    smooth:true,                    symbol: 'none',                    sampling: 'average',                    itemStyle: {                        normal: {                            color: 'rgb(255, 70, 131)'                        }                    },                    areaStyle: {                        normal: {                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                                offset: 0,                                color: 'rgb(255, 158, 68)'                            }, {                                offset: 1,                                color: 'rgb(255, 70, 131)'                            }])                        }                    },                    data: data                }            ]        });    }    render() {        return (            <div id="main" style={{ width: 500, height: 500}}></div>        );    }}

引入主模块，引入下图所示的主模块，目录位置：import echarts from ‘echarts/dist/echarts.common’;
这里写图片描述

效果图

这里写图片描述

阅读全文

0 0