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,
}
});