react实现折线图、3D等等各种图形(学习推荐使用案例二,商用推荐使用echarts)

(一)react-charts案例一

一.案例学习网址:

https://react-charts.js.org/examples/line

二.源码下载网址:

https://github.com/react-tools/react-charts

三.具体详情使用

1.比如说,我比较喜欢官网这个案例

2.到本地创建一个Create React App运行文件夹,例如我创建了一个文件夹叫my-app

3.下载官网源码,下载好之后,比如说我需要的是上图的案例,那么我找到源码对应的两个js文件。

4.将ChartConfig.js复制到我的my-app文件夹内,然后将LineChart.js文件内的代码复制到我的my-app文件夹内的App.js里面的return内容处

 

最后App.js上的完整代码为:(注意:此处我直接将ChartConfig.js复制在了src目录下)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Chart } from "react-charts";
import ChartConfig from './ChartConfig'
class App extends Component {
	render() {
		return (
			<div className="App">
				<ChartConfig series={10}>
					{({ data }) => (
						<Chart
							data={data}
							series={{
								showPoints: false,
							}}
							axes={[
								{ primary: true, type: 'time', position: 'bottom' },
								{ type: 'linear', position: 'left' },
							]}
							tooltip
						/>
					)}
				</ChartConfig>
			</div>
		);
	}
}

export default App;

7.分别执行如下代码

npm install react-charts --save
npm install ResizableBox --save

8.npm start就能看到上图我们想要的效果

四.进行简单修改操作

App.js

import React, { Component } from 'react';
import './App.css';
import { Chart } from "react-charts";
import ChartConfig from './ChartConfig'
class App extends Component {
	render() {
		const setdata=[{
			label: "Series 1",
			data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]
		},
		{
			label: "Series 2",
			data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]
		}]
		return (
			<div className="App">
				<ChartConfig>
					{() => (
						<Chart
							data={setdata}
							series={{
								showPoints: false,//节点处是否显示小圆点
							}}
							axes={[
								{ primary: true, type: 'time', position: 'bottom' },
								{ type: 'linear', position: 'left' },
							]}
							tooltip//设置到每一个节点的提示
						/>
					)}
				</ChartConfig>
			</div>
		);
	}
}

export default App;

ChartConfig.js

import React from 'react'
import { ResizableBox } from 'react-resizable'
export default class ChartConfig extends React.Component {
  render() {
    const {children} = this.props //children获取我们前面定义的data
    const width = 500;
    const height = 300;
    const style = {width: '100%',height: '100%'}
    return (
      <div>
        <ResizableBox width={width} height={height}>
          <div style={style}>
            {children({ })}
          </div>
        </ResizableBox>
      </div>
    )
  }
}

五.进行实际需求进行修改操作

(二)react-charts案例二(推荐使用,比较容易操作,但是收费,不过效果图比较美观)

一.网址:https://www.fusioncharts.com/charts?product=fusioncharts

二.选择好自己需要的图形类型,我需要多条折线图

三.代码

import React, { Component } from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
const dataSource = {
	"chart": {
	  "caption": "最上端 : 主标题",
	  "yaxisname": "y轴主标题",
	  "subcaption": "最上端 : 副标题",
	  "numdivlines": "3",
	  "showvalues": "0",
	  "legenditemfontsize": "15",
	  "legenditemfontbold": "1",
	  "plottooltext": "<b>$dataValue</b> 此处设置鼠标浮动到点上时显示的文字 $label",
	  "theme": "fusion"
	},
	"categories": [
	  {
		"category": [
		  {
			"label": "x轴第1个点"
		  },
		  {
			"label": "x轴第2个点"
		  },
		  {
			"label": "x轴第3个点"
		  },
		  {
			"label": "x轴第4个点"
		  },
		  {
			"label": "x轴第5个点"
		  },
		  {
			"label": "x轴第6个点"
		  },
		  {
			"label": "x轴第7个点"
		  }
		]
	  }
	],
	"dataset": [
	  {
		"seriesname": "Received",
		"data": [
		  {
			"value": "55"
		  },
		  {
			"value": "45"
		  },
		  {
			"value": "52"
		  },
		  {
			"value": "29"
		  },
		  {
			"value": "48"
		  },
		  {
			"value": "28"
		  },
		  {
			"value": "32"
		  }
		]
	  },
	  {
		"seriesname": "Resolved",
		"data": [
		  {
			"value": "50"
		  },
		  {
			"value": "30"
		  },
		  {
			"value": "49"
		  },
		  {
			"value": "22"
		  },
		  {
			"value": "43"
		  },
		  {
			"value": "14"
		  },
		  {
			"value": "31"
		  }
		]
	  }
	]
  };
  
const chartConfigs = {
	  type: 'msspline',//column2d是柱形图,Pie3D饼图,mscombi2d柱形折线饼结合,dragcolumn2d...,msspline双曲线,spline单曲线
	  width: 600,
	  height: 400,
	  dataFormat: 'json',
	  dataSource: dataSource,
};
class Chart extends Component {
	render () {
	  return <ReactFC {...chartConfigs} />;
	}
}
class App extends Component {
	render() {
		return (
			<Chart />
		);
	}
}

export default App;

四.效果图

(三)案例三:echarts-for-react开源免费,不推荐使用,数据一多就容易出问题,pass

http://echarts.baidu.com/examples/

npm install echarts
npm install echarts-for-react

 

  • 效果图如下:

  • 代码如下:
import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import 'echarts';
class Dashboard extends Component {
  getOption() {
    let option = {
      backgroundColor: "#fff",
      color: ['rgb(216, 151, 235)', 'rgb(246, 152, 153)', 'rgb(100, 234, 145)'],
      title: [{
        text: '账单/亿',
        left: '2%',
        top: '6%',
        textStyle: {
          fontWeight: 'normal',
        },
      }],
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '6%',
        width: '90%',
      },
      legend: {
        //x: 300,
        top: '7%',
        right: '3%',
        textStyle: {
          color: 'gray',
        },
        data: ['网购', '线下', '其他']
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: 'lightgray',
          },
        },
        axisLabel: {
          color: 'gray'
        },
        data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017']
      },
      yAxis: {
        min: 0,
        max: 100,
        type: 'value',
        axisLine: {
          lineStyle: {
            color: 'lightgray',
          },
        },
        axisLabel: {
          color: 'gray'
        },
      },
      series: [{
        name: '网购',
        smooth: true,
        type: 'line',
        symbolSize: 8,
        symbol: 'circle',
        data: [10, 40, 32, 20, 80, 90, 97]
      }, {
        name: '线下',
        smooth: true,
        type: 'line',
        symbolSize: 8,
        symbol: 'circle',
        data: [70, 50, 50, 87, 90, 80, 70]
      }, {
        name: '其他',
        smooth: true,
        type: 'line',
        symbolSize: 8,
        symbol: 'circle',
        data: [30, 40, 10, 20, 33, 66, 54]
      }]
    };
    return option;
  }
  render() {
    return (
      <ReactEcharts
        option={this.getOption()}
      />
    )
  };
};

export default Dashboard;

当我将上面的代码复制到我的页面内,出现如下报错:Uncaught TypeError: Cannot read property 'coordinateSystem' of undefined

series:里面设置coordinateSystem: 'bmap' (默认是geo)

  • echarts

接口文档:https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init

多个图表放在一个画布的例子

import React, { Component } from "react";
import echarts from "echarts";
class Delta extends Component {
  componentDidMount() {
    this.getUserSteps();
  }
  getUserSteps() {
    var myChart = echarts.init(document.getElementById("main"));
    let data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
    var dateList = data.map(function (item) {
      return item[0];
    });
    var valueList = data.map(function (item) {
      return item[1];
    });
    // 绘制图表
    let option = {
      title: {
        left: 'left',
        text: 'medical_delta_min30'
      },
      legend: {
        //x: 300,
        // top: '7%',
        // right: '3%',
        textStyle: {
          color: 'gray',
        },
        data: ['网购', '线下', '其他']//设置每一条数据是否显示
      },
      toolbox: {
        right:'2%',
        show: true,
        feature: {
          dataView: { readOnly: false },
          // restore: {},
          saveAsImage: {}
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#283b56'
          }
        }//设置tip样式
      },
      // xAxis: {
      //   boundaryGap: false,//设置点从起点开始
      //   data: dateList, 
      //   gridIndex: 0
      // },
      xAxis: [
        { data: dateList, gridIndex: 0,boundaryGap: false },
        { data: dateList, gridIndex: 1 ,boundaryGap: false},
        { data: dateList, gridIndex: 2,boundaryGap: false },
        { data: dateList, gridIndex: 3 ,boundaryGap: false},
        { data: dateList, gridIndex: 4 ,boundaryGap: false}
      ],
      // yAxis: { gridIndex: 0, splitLine: { show: true } },//有无网格
      yAxis: [
        { gridIndex: 0, splitLine: { show: false } },
        { gridIndex: 1, splitLine: { show: false } },
        { gridIndex: 2 },
        { gridIndex: 3 },
        { gridIndex: 4 }
      ],
      grid: [
        {bottom: '80%'},
        {top: '30%',bottom: '60%' },
        {top: '50%',bottom: '40%' },
        {top: '70%',bottom: '20%' },
        {top: '90%',bottom: '0%' }
    ],
      series: [
        {
          name: '网购', type: 'line', seriesLayoutBy: 'row', data: valueList,
          showSymbol: true,//设置折线图上有无圆点
          symbolSize: 6,//设置圆点的大小
          symbol: 'circle',//设置圆点的类型,circle是实心圆点
        },
        { name: '线下', type: 'line', seriesLayoutBy: 'row', data: [70, 50, 50, 87, 90, 80, 70] },
        { name: '其他', type: 'line', seriesLayoutBy: 'row', data: [100, 110, 200, 287, 190, 180, 170] },
        { name: '网购', type: 'line', xAxisIndex: 1, yAxisIndex: 1, data: valueList },
        { name: '网购', type: 'line', xAxisIndex: 2, yAxisIndex: 2, data: valueList },
        { name: '网购', type: 'line', xAxisIndex: 3, yAxisIndex: 3, data: valueList },
        { name: '网购', type: 'line', xAxisIndex: 4, yAxisIndex: 4, data: valueList },
      ]
    };
    myChart.setOption(option);
  }
  componentDidUpdate() {
    this.getUserSteps();
  }
  render() {
    return <div id="main" style={{ width: "100%", height: 400 }} />;
  }
}
export default Delta;

echarts 图表大小随窗口变动而自适应变动(无需刷新浏览器调整)

window.onresize = function(){
    myChart.resize();
    //myChart1.resize();    //若有多个图表变动,可多写

}

增加基准线

          markLine: {
            symbol: "none",
            data: [
              {
                yAxis: 100,
                // name: "平均线",
                // type: "average",
                lineStyle: {
                  color: "#a88ac3",
                  width: 2,
                  type: "solid"
                }
              },
              {
                yAxis: 300,
                // name: "平均线",
                // type: "average",
                lineStyle: {
                  color: "#a88ac3",
                  width: 2,
                  type: "solid"
                }
              }
            ]
          }

tooltip提示框内有图片

import LEFT_FOOT from "./left-foot.png"
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#283b56'
          }
        },//设置tip样式
        borderRadius: 8,//边框圆角
        backgroundColor: 'rgba(51,204,204,0.7)',//背景颜色(此时为默认色)
        formatter: function(params) {
          var res="图片"+'<br/>';
          res+="<img style='width:250px;height:150px;' src='" + LEFT_FOOT + "'/>"
          return res;
        },//设置图片
        textStyle:{color:'#ffff',align:'center',fontSize: 18,}	

echarts标题设置

var option = {
        //标题
        title : {
            show:true, //显示策略,默认值true,可选为:true(显示) | false(隐藏)
            text: '主标题', //主标题文本,'\n'指定换行
            link:'', //主标题文本超链接,默认值true
            target: null, //指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
            subtext: '副标题', //副标题文本,'\n'指定换行
            sublink: '', //副标题文本超链接
            subtarget: null, //指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
            x:'center' //水平安放位置,默认为'left',可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
            y: 'top', //垂直安放位置,默认为top,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
            textAlign: null ,//水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center
            backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色,默认'rgba(0,0,0,0)'透明
            borderColor: '#ccc', //标题边框颜色,默认'#ccc'
            borderWidth: 0, //标题边框线宽,单位px,默认为0(无边框)
            padding: 5, //标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距
            itemGap: 10, //主副标题纵向间隔,单位px,默认为10
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontFamily: 'Arial, Verdana, sans...',
                fontSize: 12,
                fontStyle: 'normal',
                fontWeight: 'normal',
            },
            subtextStyle: {//副标题文本样式{"color": "#aaa"}
                fontFamily: 'Arial, Verdana, sans...',
                fontSize: 12,
                fontStyle: 'normal',
                fontWeight: 'normal',
            },
            zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel,大部分情况可以通过二级层叠控制z实现层叠控制。
            z: 6, //二级层叠控制,默认6,同一个canvas(相同zlevel)上z越高约靠顶层。
        },

 https://blog.csdn.net/zhang__ao/article/details/80745873

echarts设置legend属性

legend: {right: '4%',top:'40'},//可以设置图标位置,同时也可以通过left,bottom来设置

echarts修改legend文字颜色:通过textStyle来修改

legend: {
                    textStyle:{
                        color:"#acbff4"
                    }
                },

echarts设置图形每个区域的颜色和legend方块颜色

 option: {
                color:["#56b0f8","#50e2dd","#6669eb","#edb846","#3fd094","#fca47e"],

在option中直接设置color

 

echarts富文本设置多种样式:rich

title: {
        text: '天气情况统计{a|100}',
        textStyle: {
            rich: {
                a: {
                    color: 'red'
                }
            }
        }
    },

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页