没有合适的资源?快使用搜索试试~ 我知道了~
关于Echarts的总结,重要是以柱状图为例子,附带截图和源码,基本一看就懂了!!
资源推荐
资源详情
资源评论
Title 设置
title:{
show: true,
text: '测试',
link: '<a href="javascript:void(0)"
onclick="test()"></a> ',
target: 'self',
textStyle: {
padding: 5,
color:'red',//也可以设置字体,字号等
fontStyle: 'normal',
fontWeight: normal,
fontFamily: 'sans-serif',
fontSize: 18,
z: 2,
backgroundColor: 'transparent',//默认透明
},
subtext: '这是副标题',
itemGap: 10,//控制主副标题之间的距离
sublink: '',
subtarget: 'blank',
padding: 5,
//left: 'center',//控制标题位置
top: 'auto',
right: 'auto',
bottom: 'auto',
backgroundColor: 'transparent',//'rgb(128,
60, 128)',//默认透明
},
Legend:
legend:{
type:'scroll',//scroll,可以滚动翻页的图例,一般在
图例较多时使用,默认 plain
itemGap: 10,//图例之间的距离
data:['更新后各等别基本农田占基本农田总面积比例'],
x:'center',//设置 X 就是在以 x 轴为参照,y 则以 y
为参照
orient: 'horizontal',//vertical,图例列表布局
方向
align:'auto',//对齐方式
selectedMode: true,//点击图例,显示状态
inactiveColor: '#ccc',//'green'//图例关闭时
的颜色
selected: {
// 选中'系列 1'
'系列 1': true,
// 不选中'系列 2'
'系列 2': false
},
//left: 'auto',
// top: 'auto',
//right: 'auto',
// bottom: 'auto',
width: 'auto',
height: 'auto',
textStyle: {
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12,
backgroundColor: 'transparent',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 0,
padding: 0,
},
backgroundColor: 'pink',//背景色
data: [{
name: '更新后各等别基本农田占基本农田总面积比
例',
//图例项的 icon ECharts 提供的标记类型包括
'circle', 'rect', 'roundRect', 'triangle', 'diamond',
'pin', 'arrow'
//也可以通过 'image://url' 设置为图片,
其中 url 为图片的链接,或者 dataURI。
//可以通过 'path://' 将图标设置为任意的矢
量路径。这种方式相比于使用图片的方式,
//不用担心因为缩放而产生锯齿或模糊,而且可以设
置为任意颜色。路径图形会自适应调整为合适的大小。
//路径的格式参见 SVG PathData。可以从 Adobe
Illustrator 等工具编辑导出。
// 强制设置图形为圆。
// icon: 'diamond',
// 设置文本为红色
textStyle: {
color: 'red',
},
}],
//图例的 tooltip 配置,配置项同 tooltip。默认不显示,可以在 legend 文字很多的
时候对文字做裁剪并且开启 tooltip,如下示例:
formatter: function (name) {
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei',
'…');
},
tooltip: {
show: true
},
},
关于 X 轴的设置 xAxis
反向坐标轴:
//X 轴设置
xAxis:{
show: true,
gridIndex: 0,//x 轴所在的坐标系,默认第一个坐标系
position:'bottom',//X 轴位置 bottom,top
offset: 0,//默认位置的偏移距离,在有多个 x 轴时
type: 'value',//'category',value//
name: '所占比例',
inverse: false,//坐标轴是否反向
//boundaryGap: ['20%', '20%'],
//坐标轴名称设置
triggerEvent: false,//坐标轴是否触发事件,默认不触发,
nameLocation: 'center',//start,center 坐标名称
nameTextStyle: {
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12,
align:'center',
剩余23页未读,继续阅读
资源评论
键盘哥
- 粉丝: 18
- 资源: 10
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功