欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Taro中多端使用Echarts

程序员文章站 2024-01-11 16:55:16
在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

解决在安卓上不显示问题

Taro中多端使用Echarts
在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

相关标签: Taro