echarts.js 官网
http://echarts.baidu.com/
效果:
代码:
updated:function(){
this.$nextTick(function () {
/**************************************************** 大数据页面 str************************************************************/
var oUsercount = echarts.init(document.getElementById('pie_usercount'));
var default_fc = "#00eaff";
var default_fs = "12";
var pointLine_color = "#3ca5fe";//月交易折线的颜色
var daylyPointLine_color = "#fdd849";//日交易额折线的颜色
var opt_usercount = {
color:["#fdd324","#7be7ed","#fd642d","#158df2","#155ef2"],//每段图默认的颜色,按顺序
tooltip: {//全局设置
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend : {//说明文字的设置
width:80,height:120,
itemWidth:10,itemHeight:10,
orient: 'vertical',
//x: 'left',//图&文字的排列方向
right:20,//legend定位
top:70,//
data: ['平台用户', '城市运营商', '装修公司', '普通设计师', 'VIP设计师'],//与series 的data要一一对应
textStyle: {//说明文字的样式
color: default_fc
, fontSize: default_fs
}
},
series: [
{//pie图显示设置
name:'用户数量详情',//系列名称 {a|{a}}
type:'pie',
radius: ['40%', '60%'],
center:['40%','50%'],//居中位置["x","y"]
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'outline'
,textStyle: {
fontSize:default_fs,
fontWeight: 'bold'
}
,formatter:"{b}: {d}%"//饼图上显示文字的格式设置,b和d 都有特殊代表
},
emphasis: {
show: true,
textStyle: {
fontSize: default_fs,
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'green'
}
}
},
//data: ['平台用户', '城市运营商', '装修公司', '普通设计师', 'VIP设计师'],
data:[
{value:335, name:'平台用户'},
{value:310, name:'城市运营商'},
{value:234, name:'装修公司'},
{value:135, name:'普通设计师'},
{value:1548, name:'VIP设计师'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
oUsercount.setOption(opt_usercount);//设置初始化数据
注意:要放在updated中,且要加上this.$nextTick(function(){ })
效果2:
code:
//月交易额详情
var oMonthsum = echarts.init(document.getElementById('line_monthsum'));
var opt_monthsum = {
// color:"#3ca5fe",
grid:{left:'20%'},//这个可以调整Y轴距离父容器边距
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
name:"(单位:月份)",
nameLocation:"end",
align:"center",
type: 'category',
boundaryGap: false,
data: ['10','11','12','1', '2', '3', '4', '5', '6', '7', '8', '9']
,nameTextStyle:{//名称的样式
color:default_fc,verticalAlign:"bottom",padding:[70,0,0,-84]//调整x轴名称的position
},
axisLabel:{//轴线label文字
color:default_fc,
fontSize:default_fs
},
axisLine:{//直角坐标系的轴线
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
lineStyle:{
color:default_fc
}
}
},
yAxis: {
name:"(单位:元)",
type: 'value',
axisLabel: {
formatter: '{value}'
},
axisPointer: {
snap: true
}
,axisLine:{
show:false
,shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
lineStyle:{
color:default_fc
}
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: pointLine_color
}, {
gt: 6,
lte: 8,
color:pointLine_color
}, {
gt: 8,
lte: 14,
color: pointLine_color
}, {
gt: 14,
lte: 17,
color: pointLine_color
}, {
gt: 17,
color: pointLine_color
}]
},
series: [
{
name:'月交易额',
type:'line',
smooth: true,
//data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
data:vm.alldata.monChart,
markArea: {
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}
}
]
};
oMonthsum.setOption(opt_monthsum);
注意:也是要放在vue.js中的updated:function(){this.$nextTick(function(){ })}中,更新数据。