当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Taro中多端使用Echarts

Taro中多端使用Echarts

2020年07月18日  | 移动技术网IT编程  | 我要评论

在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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网