Echarts组件
echarts.js规定只能使用dom原生方法获取标签。即document.getElementById('main')；
- title组件
标题组件（主标题和副标题）
<script>
option = {
//标题组件
title:{
show: 'true' // 默认显示标题组件
text:'标题文字' //主标题文本，支持\n换行
textStyle:{ // 标题样式
link: 'http://echarts.baidu.com/option.html#title.link', //主标题超文本链接,
left: 50, // 配置title的位置
color:'',
fontStyle:'italic',
fontWeight:'100', //100-400,
lineHeight:56, //未设置lineHeight，默认取父层级的lineHeight 56
//rich 自定义富文本样式
rich:{
textSS： {
color:''
...
}
},
subtext:'这是一个副标题' //副标题
subtextStyle:{ // 副标题样式
color:''
...
},
textAlign:'auto' //主标题和副标题的水平对齐方式
textVerticalAlign:'auto' //主副标题的垂直对齐方式
}
}
</script>
- toolBox组件
工具栏
option = {
toolbox: {
show: true, //是否显示工具栏组件
orient: 'vertical', //工具栏icon的布局朝向
itemSize: 18, //工具栏icon的大小
itemGap: 20, //item之间的间距
right: 20, //toolbox的定位位置
feature: {
saveAsImage: { show: true }, //导出图片
dataView: { show: true }, //数据视图
magicType: { //动态类型切换
type: [ 'line', 'bar' ]
},
dataZoom: { show: true }, //数据区域缩放
restore: { show: true }, //重置
}
}
- legend组件
图例组件
<script>
option={
legend:{
type:'plain'， //plain:普通图例 | scroll 可滚动翻页的图例，当图例数量较多时使用
orient : 'vertical', // 图例列表的布局朝向
left|top|right|bottom: 20| 20%|center ， //图例组件离容器的距离，
itemWidth|itemHeight:xx //图例标记的图形宽高
//使用格式化图例文本（字符串模板或回调函数）
formatter: 'Legend{name}'
//或
formatter:function(name){
return 'Legend'+name
},
icon:'circle' //图例项的icon circle|rect|roundRect|triangle|diamond|pin|arrow|none
// 默认不显示，如果legend文字很多时，手动对文字做裁剪并开启tooltip
formatter:function(name){
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
},
tooltip:{
show:true
}
textStyle:{
rich:{
Legend:{
color:''
...
}
}
},
data:['检验数'，'合格数'] //两个图例
//或者强制修改某一项
data:[{
name:'合格数'，
icon:'triangle'
}]
}，
//设置默认只显示一条线，其他图例灰掉
selected:{
'检验数':true,
'合格数':false
}
}
</script>
- toolTip组件
提示框组件
option = {
tooltip: {
trigger: 'axis', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
formatter : "{a} <br/>{b} : {c} ({d}%)", // 格式化
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
}
}
- markPoint和markLine组件
option = {
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' },
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
}
}
- xAxis
x轴，一般单个grid组件最多只能放上下两个x轴，多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠
注意：必须和yAxis一起使用
<script>
option = {
//设置多个x轴
xAxis:[
{
//position： top|bottom 当有多个x轴的时候
position:'top',
//type: category(类目轴，适用于离散的类目数据，必须通过data设置类目数据)|value(数值轴，适用于连续数据)|time(时间轴，适用于连续的时序数据)|log(对数轴，适用于对数数据)
type:'category',
data:['周一'，'周二']
}，
{
type:'value',
min: 10,
max: 300,
interval: 10, //强制设置坐标轴分割间隔
minInterval: 1 //最小倍数
maxInterval: ... //最大倍数
},
{
position:'bottom',
type:'category',
data:['12'，'23']
}，
{
position:'bottom',
//在相同的position上有多个x轴的时候用，相对于默认位置的偏移
offset:59
type:'category',
data:['周一'，'周二']
}，
{
//坐标轴是否是静态，无法交互
silent:true,
}
]
}
</script>
- series系列数据
option = {
type : 'line', // 设置图例类型
name: 'name',系列名称，用于tooltip的显示，legend的图例筛选
radius: '10', // 圆角
}
$(function () {
var axisData= ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
var seriesData = [{ name: '直接访问', data: [320, 302, 301, 334, 390, 330, 320] },
{name: '邮件营销', data: [120, 132, 101, 134, 120, 230, 210]},
{name: '联盟广告', data: [220, 182, 191, 234, 290, 330, 310]},
{name: '视频广告', data: [150, 212, 201, 154, 190, 330, 410]},
{ name: '搜索引擎', data: [820, 832, 901, 934, 1290, 1330, 1320] }];
})
- 显示暂无数据
if (data.data.length !== 0) {
var obj= echarts.init(document.getElementById('chart'));
obj.setOption(options);
} else {
var html = '<span style="color:#ccc; font-size: 14px;">暂无数据</span>';
document.getElementById('pieAssets').classList.add('df-ac-jca')
document.getElementById('pieAssets').innerHTML = html;
}
