1.React中引入Echarts

// 引入 ECharts 主模块import echarts from 'echarts/lib/echarts';// 引入饼状图import  'echarts/lib/chart/pie';// 引入提示框和标题组件import 'echarts/lib/component/tooltip';import 'echarts/lib/component/title';

2.react页面配置

componentDidMount() {        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('todayCustomerNum'));        // 绘制图表        myChart.setOption({            tooltip: {                trigger: 'item',                formatter: ""            },            series: [                {                    name:'访问来源',                    type:'pie',                    radius: ['50%', '70%'],                    avoidLabelOverlap: false,                    hoverAnimation:false,                    label: {                        normal: {                            show: false,                            position: 'center'                        },                        emphasis: {                            show: true,                        }                    },                    labelLine: {                        normal: {                            show: false                        }                    },                    color: ['#32A8FF'],                    data:[{value:5,name:'潜客数',itemStyle:{                            normal:{                                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上                                    offset: 0,                                    color: '#4ab2d8'                                },{                                    offset: 1,                                    color: '#4cd4bc'                                }])                            }                        }}]                }            ]        });    }

3.阻止饼状图hover变大效果

　　在series属性下设置 hoverAnimation:false

4.饼状图圆环设置宽度

　　在series属性下设置 radius: ['70%','60%'],

　　百分比值越接近圆环越窄

5.legend设置不显示问题

　　1.legend data属性内部name与 series内 name对应

　　2.legend引入　

import 'echarts/lib/component/legend';

 

6.栅格线属性设置

　　在xAxis 与 yAxis 内设置splitLine属性

splitLine:{    lineStyle: {       color: '#3e485d',       type: 'dashed',       width: 1,    }}

7.react内legend设置icon图片路径

import home_ic_tit from '../../../../static/images/home_ic_tit.png';legend: {                    x:'right',                    y:'top',                    itemGap: 10,                    padding: 20,    // [5, 10, 15, 20]                    data:[ {name: '成交',                        icon : 'image://'+home_ic_tit,                        textStyle:{color:"#7b889d"}                    }, {name:'预购',                        icon : 'circle',                            textStyle:{color:"#7b889d"}                    }],                },