码迷,mamicode.com
首页 > 其他好文 > 详细

React 配合echarts使用问题记录

时间:2019-03-19 10:45:25      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:初始化   mst   new   doc   day   animation   ati   series   mat   

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%‘],

  百分比值越接近圆环越窄

。。。 

React 配合echarts使用问题记录

标签:初始化   mst   new   doc   day   animation   ati   series   mat   

原文地址:https://www.cnblogs.com/feng3037/p/10556780.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!