Taro中多端使用Echarts
程序员文章站
2022-04-15 23:20:57
在RN中使用npm install native-echarts --save解决在安卓上不显示问题在node_modules找到native-echarts目录下的tpl.html并复制到壳工程下边的android/app/src/main/assets文件夹下面、没有就创建一个然后在index.js中添加这行代码source={Platform.OS === 'ios' ? require('./tpl.html') : {uri:'file:///android_asset/tpl.ht...
在RN中使用
npm install native-echarts --save
解决在安卓上不显示问题
在node_modules找到native-echarts目录下的tpl.html并复制到壳工程下边的android/app/src/main/assets文件夹下面、没有就创建一个
然后在index.js中添加这行代码
source={Platform.OS === 'ios' ? require('./tpl.html') : {uri:'file:///android_asset/tpl.html'}}
示例代码:(android在真机上面跑、模拟器显示不出来)
//自己添加一下环境判断、然后把组件导入进去
{process.env.TARO_ENV === 'rn'?
<StatisticRn></StatisticRn>
:
<StatisticH5></StatisticH5>
}
reactNative统计图组件示范:
//统计图
import Taro,{Component} from '@tarojs/taro'
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Echarts from 'native-echarts';
type propsType = {
}
interface TimeList{
props:propsType
}
class TimeList extends Component {
constructor(props) {
super(props)
this.state = {
option:{
title: {
text: 'ECharts demo'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
}
render(){
const {
option:option
} = this.state
return (
<Echarts option={option} height={150} />
)
}
}
export default TimeList
在h5中使用
npm install echarts --save
安装完不行的话重新install一下
//在h5中显示不同的echarts模块、id名称必须不同
import Taro,{Component} from '@tarojs/taro'
import {View,Text,Button,Image} from '@tarojs/components'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
class Statistic extends Component{
constructor(props){
super(props)
this.state = {
}
}
componentDidMount() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main2'));
// 绘制图表
myChart.setOption({
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
render(){
return(
<View style={{"position":"relative"}}>
<View id="main" style={{ width: Taro.pxTransform(200), height: Taro.pxTransform(100) }}></View>
<View id="main2" style={{ width: Taro.pxTransform(200), height: Taro.pxTransform(100) }}></View>
</View>
)
}
}
export default Statistic
在小程序中使用
ec-canvas文件夹下载地址
然后下载ec-canvas文件夹子、放到你的目录中
示例:
PieChart.js
import Taro, { Component } from "@tarojs/taro";
import * as echarts from "./../../../pages/components/ec-canvas/echarts";
function setChartData(chart, data) {
let option = {
series : [
{
name: '访问来源',
type: 'pie',
center: ['50%', '50%'],
radius: [0, '60%'],
data: data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option);
}
export default class PieChart extends Component {
config = {
usingComponents: {
"ec-canvas": "./../../../pages/components/ec-canvas/ec-canvas"
}
};
constructor(props) {
super(props);
}
state = {
ec: {
lazyLoad: true
}
};
refresh(data) {
this.Chart.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
setChartData(chart, data);
return chart;
});
}
refChart = node => (this.Chart = node);
render() {
return (
<ec-canvas
ref={this.refChart}
canvas-id="mychart-area"
ec={this.state.ec}
/>
);
}
}
statistic.tsx
import Taro, { Component, Config } from '@tarojs/taro'
import { Canvas,Text,View } from '@tarojs/components'
import PieChart from './PieChart'
import './statistic.scss'
class Statistic extends Component {
constructor(props){
super(props)
this.state={
}
}
componentDidMount() {
const chartData = [
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
];
setTimeout(()=>{
this.pieChart.refresh(chartData);
})
}
refPieChart = (node) => this.pieChart = node
render () {
const {
} = this.state
return (
<View className="pie-chart">
<PieChart ref={this.refPieChart} />
</View>
)
}
}
export default Statistic
statistic.scss、css文件很重要、不写的话展示不出来
.pie-chart {
width: 100%;
height: 100vh;
}
本文地址:https://blog.csdn.net/weixin_43698451/article/details/107387905
上一篇: springboot validation 自定义验证注解
下一篇: 第二章数据和表达式