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