完整图(导航条可动画滑动)
饼图效果图
图1 饼图
柱折线图效果图
图2 全部(未缩放前) 图3 缩放后
饼图参数
var ordersPieChart= echarts.init(document.getElementById('ordersPieChart'));//初始化饼图div
var oPieOptions={
backgroundColor: '#fff',
color: ['#27c6e3','#1d79da'],
title:{
show:true,
text:'2018/07/05',
right:0,
top:0,
z:3,
textStyle:{
color:'#333',
fontFamily:"PingFangSC-Regular",
fontWeight:"normal",
fontSize:12
}
},
series : [
{
name:'面审量',
type:'pie',//饼图
radius : '55%',//半径
center: ['50%', '50%'],//位置
data:[//数据 可根据项目情况封装
{
value:9,//值
name:"个人",//每个扇区的名称
code:1,//自定义属性 可在项目需要时添加
label: {//各扇区的标签
show:true,
position:'inside',//位置
padding:[-5,10,5,0],
normal: {
formatter:[ //自定义标签
'{label|{b}:}{con1|{c}单}{row|}',//b是name值c是value值
'{label|金额:}{con| 100万元}'
].join('\n'),
rich:{//富文本编辑
row:{ // css类名样式
height:10,
},
label:{
color:"#333",
align:'left',
fontSize:10
},
con1:{
color:"#fc3f3f",