标签:初始化 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%‘],
百分比值越接近圆环越窄
。。。
标签:初始化 mst new doc day animation ati series mat
原文地址:https://www.cnblogs.com/feng3037/p/10556780.html