Echart-option

var option = {
//标题,每个图表最多仅有一个标题控件
title: {
text: "图的标题",
link: "",//主标题文本超链接
subtext: "", //副标题文本,
sublink: "",//副标题文本超链接
x: "", //水平坐标,默认为左侧center|left|right| {number}(px)
y: "", //top|bottom|center|{number}(y坐标,单位px)
},
tooltip: {//提示框,鼠标悬浮交互时的信息提示
trigger: "axis",//触发类型,默认(item)数据触发,可选为:item|axis
},
//图例,每个图表最多仅有一个图例
legend: {
show: true,
data: ['销量'],
//水平安放位置,默认为全图居中,可选为:center|left|right|{number}(x坐标,单位px)
x: "center",
//垂直安放位置,默认为全图顶端,可选为top|bottom|center|{number}(y坐标,单位px)
y: "center",
//legend的data: 用于设置图例,data内的字符串数组需要与sereis数组内每一个series的name值对应
data: ['销量', '人员'],
},
toolbox: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为false
show: true,
//工具箱自定义功能回调处理
feature: {
//辅助线标志
mark: { show: true },
//dataZoom,框选区域缩放,自动与存在的dataZoom控件同步,分别是启用,缩放后退
dataZoom: {
show: true,
title: {
dataZoom: "区域缩放",
dataZoomReset: "区域缩放后退"
}
},
//数据视图,可设置更多属性,readOnly 默认数据视图为只读(即值为true),可指定readOnly为false打开编辑功能
dataView: { show: true, readOnly: true },
//magicType,动态类型切换,支持直角系下的折线图、柱状图、堆积、平铺转换
magicType: { show: true, type: ["line", "bar"] },
//restore,还原,复位原始图表
restore: { show: true },
//saveAsImage,保存图片(IE8-不支持),图片类型默认为’png’
saveAsImage: { show: true }
}
},
xAxis: {//x轴
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
type: 'category',//坐标轴类型,横轴默认为类目型’category’
},//横坐标
yAxis: {
show: true,
//坐标轴类型,纵轴默认为数值型’value’
type: 'value',
//分隔区域,默认不显示
splitArea: { show: true }
},//纵坐标
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};


image.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容