用到ECharts记录下一些功能免得以后找文档找不到。
这个博客对ECharts讲解很全面 http://www.stepday.com/my.stepday/?echarts
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 柱状图
'echarts/chart/line'// 折现图
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('echartDiv')); if (xData.length < || yData.length < ) {
myChart.showLoading({
text: '暂无数据',
effect: 'bubble',
textStyle: {
fontSize:
}
});
return;
} option = {
title: {
text: '企业实习分布情况',
subtext: '人数分布'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['实习人数', '平均薪资']
},
toolbox: {//工具栏
show: true,
feature: {
mark: { show: true },
dataZoom: { show: true },//区域缩放
dataView: { show: true, readOnly: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
dataZoom: {//滚动条
show: true,
realtime: true,
start: ,
end: ,
y: ,
height:
},
xAxis: [
{
name: ' 企业',
type: 'category',
data: xData,
interval: ,
axisLabel: {//x轴文字
rotate: , //刻度旋转角度
textStyle: {
color: "black", //刻度颜色
fontSize: //刻度大小
}
},
splitArea: { show: true },//显示格子阴影
}
],
grid: {
y: ,
y2: // 可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
yAxis: [
{
name: '实习人数',
type: 'value',
axisLabel: {//格式化数据
formatter: '{value}人 '
}
},
{
name: '平均薪资',
type: 'value',
axisLabel: {
formatter: '{value}元'
},
splitLine: { show: false }
}
],
series: [
{
name: '实习人数',
type: 'bar',
data: yData,
itemStyle: { // 系列级个性化
normal: {
barBorderRadius: ,//柱状图四角平滑(好像有其他方法)
},
emphasis: {
barBorderRadius: ,
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
}, markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '平均薪资',
smooth: true,//使折线图平滑显示
type: 'line',
data: yDataMoney,
yAxisIndex: ,
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
}, markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
} ]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);