React+echarts+slick实现图表切换

React+echarts+slick实现图表切换

技术栈:React echarts slick

最终实现效果

这里都是写死的数据,因为后端服务挂了==

1. 首先你需要先用Slick插件实现轮播切换
2. 编写echarts配置项

• index.js文件

import ReactEcharts from "echarts-for-react";
import { Component } from "react";
import styles from './productTypeSum.less'
class ProductTypeSum extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        const t = this
        let legendData = []
        let productTypeDetailList = [
            { productType: '焚烧垃圾', todayInWeight: 0, todayInPercent: 0, todayInCar: 0 },
            { productType: '可回收物', todayInWeight: 0, todayInPercent: 0, todayInCar: 0 },
            { productType: '其他垃圾', todayInWeight: 0, todayInPercent: 0, todayInCar: 0 },
            { productType: '厨余垃圾', todayInWeight: 0, todayInPercent: 0, todayInCar: 0 },
        ]
        // 饼图列表
        let todayTotalInCar = 0
        let todayTotalInWeight = 1
        legendData = productTypeDetailList.map(item => {
            return item.productType
        })
        const getOption = () => {
            let option = {
                    title: {
                        text: '今日垃圾类型进厂量统计图',   // 标题配置
                        top: '5%',  // 距离顶部高度
                        left: 'center',  // 左右位置
                        // 标题样式  跟css差不多,驼峰命名哦
                        textStyle: {
                            fontSize: 24,
                            color: 'rgba(0,0,0,0.65)',
                            fontWeight: 'normal',
                            fontFamily: 'MicrosoftYaHei'
                        }
                    },
                    //  工具,文本提示
                    tooltip: {
                        show: true,
                    },
                   // 图例,就下面的指示点跟文字
                    legend: {
                        type: 'scroll',              //  图例太多时可滚动
                        show: true,                // 是否展示图例
                        bottom: '15%',
                        left: '30%',
                        icon: 'circle',                    // 图例的指示标志
                        orient: 'vertical',                //  布局方式
                        padding: [5, 0, 0, 0],
                        // 展示的数据
                        data: legendData,
                        //  自定义图例的展示格式
                        formatter: function (name) {
                            let todayInWeight, todayInPercent, todayInCar
                            for (let i = 0; i < productTypeDetailList.length; i++) {
                                if (productTypeDetailList[i].productType === name) {
                                    todayInWeight = productTypeDetailList[i].todayInWeight
                                    todayInPercent = productTypeDetailList[i].todayInPercent
                                    todayInCar = productTypeDetailList[i].todayInCar
                                }
                            }
                            // 因为要加空格,我这里没有更好的解决方式,只用了/r/r/r来实现
                            let arr = [
                                name + '\r\r\r\r\r',
                                todayInWeight + `吨` + '\r\r\r\r\r',
                                todayInPercent + '%' + '\r\r\r\r\r',
                                todayInCar + '车次',
                            ]
                            return arr.join('')
                        }
                    },
                     //  具体需要展示的图数据
                    series: [
                    // 第一个饼图,放中间的
                        {
                            name: '总进厂量(吨)',
                            type: 'pie',
                            radius: [0, '20%'],
                            center: ['50%', '40%'],
                            // 标签位置
                            label: {
                                normal: {
                                    show: true,
                                    color: '#000',
                                    position: 'center',
                                    formatter: function (a) {
                                        return a.value + '\n' + a.name
                                    }
                                }
                            },
                            data: [{ value: todayTotalInWeight, name: '总进厂量(吨)' }]
                        },
                        // 第二个饼图,环绕在四周的
                        {
                            name: '垃圾类型',
                            type: 'pie',
                            center: ['50%', '40%'],
                            radius: ['30%', '40%'],
                            avoidLabelOverlap: false,
                            data: productTypeDetailList.map(item => {
                                return {
                                    value: item.todayInWeight,
                                    name: item.productType
                                }
                            })
                        }
                    ]
                }
            

            return option
        }
        return (
            <ReactEcharts
                notMerge
                option={getOption()}
                style={{ height: '100%' }}
            ></ReactEcharts>

        )
    }
}
export default ProductTypeSum