Echarts基本的实用属性
大家也可以去Echarts官网查看相关属性：，下面都是我在官网中提炼和平时工作中所用到的基本常见属性以及一些特殊属性。 基本结构
<html>
<div id="container" style="width:100px;height:100px"><div>
</html>
<script>
var chartDom = document.getElementById(container);
var myChart = echarts.init(chartDom);
option = {
legend: {},//小标签，图例
grid: {},//图表的位置
tooltip:{},//鼠标移入显示的文本
toolbox: {},//拓展的基本功能，复位，下载，转换等等
xAxis: {},//x轴
yAxis: {},//y轴
color:[],//颜色，柱形图，折线等等
series: {},//存放的数据，值
}
option && myChart.setOption(option);//绘制图表
</script>
详细属性 1，legend，小标签，图例
legend: {
top:32,//图例距离页面顶部的距离
left:center,//图例的位置，left，center，right
data: [降水量, 累计降水],//图例的名称，有几个就写几个
},
2，grid，图表的位置
grid: {
left: "2%",//图表距离页面左边的距离
top: "16%",//上
right: "0%",//右
bottom: "0%",//下
containLabel:true,//是否包含坐标轴的刻度标签。
},
3，tooltip，鼠标移入显示文本
tooltip: {
trigger: "axis", //触发类型
backgroundColor: "rgba(255,255,255,1)", //背景
textStyle: {
color: "black", //设置文字颜色
},
axisPointer: {//鼠标更随
type: cross,
label: {
backgroundColor: #fff,
color:#000,
borderColor:#aaa,
borderWidth:1
},
}
},
4，toolbox，附加功能
toolbox: {
show: true,//是否显示
feature: {
dataView: {//转换为表格
show: true
},
restore: {//还原，复位，恢复第一次的样子
show: true
},
saveAsImage: {//下载，保存为图片
show: true
},
dataZoom:{//局部数据缩放
show:true
},
magicType: {//折线图柱状图等等切换
type: [line, bar, stack]
}
}
},
5，color，图例，内容的颜色
color:#1F1FF9,//只有一个图例 color:[],//多个就用数组装着，逗号隔开
6，X轴
xAxis: {
type: time,//轴线格式
axisLabel: {
show: true,//标签显示
interval:0 //隔一个显示一个刻度标签
}
},
7，Y轴 如果想要双y轴复制一个就可以了
yAxis: [{
name:降水,//名称
type: value,
position: left,//位置
interval:50, //刻度值每次增加几个
min:0,//最小值
max:200,//最大值
axisLine:{//轴线
show:true,
lineStyle:{color:#35AA36} //轴线颜色
},
axisLabel:{//刻度带单位
formatter:{value}mm,
}
}]
8，series，数据
series: [{
stack:名字,//柱子堆叠，一根柱子显示多种数据，只要名字一样就可以
barWidth：‘10px’//柱子宽度
barGap: 0.1,//间隙
name:"降水量",
data:[],//值
type: bar,//类型
yAxisIndex: 0, // 通过这个判断左右轴
}, {
name:"累计降水",
data: [],
type: line,
yAxisIndex: 1,
smooth: true,
symbolSize: 7,
areaStyle: { // 折现下是否填充阴影
color: {//阴影样式
type: linear,//类型
x: 0,//位置
y: 0,
x2: 0,
y2: 1,
colorStops: [{//颜色
offset: 1,
color: rgba(86,122,210,0.6)
}],
global: false
}
}
}]