native-echarts 实现效果&代码 记录

install

$ npm install native-echarts --save

代码块：

/**
 * 创建： jiaojiao on 2018/10/30.
 * 功能：LineView
 */
 'use strict';
 import React, {PureComponent} from 'react';
 import {
     View,
     Text,
     StyleSheet,
     Dimensions
 } from 'react-native';
import Header from '../../components/header'; //头部导航
let {width, height} = Dimensions.get('window');
import Echarts from 'native-echarts';

 export default class LineView extends PureComponent {
     static propTypes = {};

     constructor(props) {
         super(props);
         this.state = {
             titleData:['获取','转出'],
             xAxisData:[5, 10, 15, 20, 25, 30],
             getData:[20, 8, 29, 16, 7, 38],
             outData:[5, 20, 36, 10, 51, 5],
         };
     }

     render() {
         let {getData,outData,titleData,xAxisData} = this.state;
         let option = {
             backgroundColor: '#fff',
             title: {
                 text: 'ECharts line'
             },
             legend: {
                 data:titleData
             },
             grid: {
                 left: 10,   //图表距边框的距离
                 right: 10,
                 bottom: 20,
                 top: 64,
                 containLabel: true,

             },
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {//鼠标滑过的线条样式
                     type: 'line',
                     lineStyle: {
                         color: '#ee9f43',//颜色
                         width: 2,//宽度
                         type: 'solid'//实线
                     }
                 },
             },
             calculable: true,
             xAxis: {
                 type: 'category',
                 data: xAxisData,
                 boundaryGap: false,//让折线图从X轴0刻度开始
                 axisLine: {//坐标轴
                     lineStyle:{
                         opacity: 0.01,//设置透明度就可以控制显示不显示X或者Y轴
                     },
                 },

                 splitLine: {//网格
                     // show: false,//网格线
                     lineStyle:{
                         color: '#999999',
                         opacity: 0.01,//设置透明度就可以控制显示不显示
                     },
                 },
                 axisTick: {//刻度
                     show: false,//去掉刻度线
                     lineStyle:{
                         color: '#eeeeee',
                     },
                 },
             },

             yAxis: {
                 min:0,
                 type: 'value',
                 axisTick: {//刻度
                     show: false,//去掉刻度线
                 },
                 axisLine: {//坐标轴
                     lineStyle:{
                         opacity: 0,
                     },
                 },
                 splitLine: {//网格
                     // show: false,//网格线
                     lineStyle:{
                         color: '#eeeeee',
                     },
                 },
             },
             series: [
                 {
                     name: '获取',
                     type: 'line',
                     symbol: 'none',
                     color: ['#6a9dee'],
                     data: getData,
                     areaStyle: {
                         normal: {
                             color: {
                                 type: 'linear',
                                 x: 0,
                                 y: 0,
                                 x2: 0,
                                 y2: 1,
                                 colorStops: [
                                     {
                                         offset: 0,
                                         color: '#d2d3d9'
                                     },
                                     {
                                         offset: 1,
                                         color: '#fff',
                                     },
                                 ],
                                 globaCoord: false,
                             },
                         },
                     },
                 },
                 {
                     name: '转出',
                     type: 'line',
                     symbol: 'none',
                     color: ['#ee9f43'],
                     data: outData,
                     areaStyle: {
                         normal: {
                             color: {
                                 type: 'linear',
                                 x: 0,
                                 y: 0,
                                 x2: 0,
                                 y2: 1,
                                 colorStops: [
                                     {
                                         offset: 0,
                                         color: '#fae4cb'
                                     },

                                     {
                                         offset: 1,
                                         color: '#fff',
                                     },
                                 ],
                                 globaCoord: false,
                             },
                         },
                     },
                 }
             ]
         };
         return (
             <View style={styles.container}>
                 <Header title={"折线图"} style={[styles.header]} />
                 <View style={{marginTop:100}}>
                 <Echarts option={option} height={309} width={width} />
                 </View>
             </View>
         );
     }

 }

 const styles = StyleSheet.create({
     container: {
         flex: 1,

     }
 });