title:
显示标题
title.text=''----
string----
主标题文本,支持使用 \n 换行。
title. textStyle---- 一些基本的CSS样式都可以使用
tooltip:
提示信息
legend:
图例
坐标轴:
X轴
xAxis3D.show---- boolean---- 是否显示 x 轴。
xAxis3D.name = 'X'---- string---- 坐标轴名称。
xAxis3D.grid3DIndex---- number---- 坐标轴使用的 grid3D 组件的索引。默认使用第一个 grid3D 组件。
Y轴
yAxis3D.show---- boolean---- 是否显示 y 轴。
yAxis3D.name = 'Y'---- string---- 坐标轴名称。
yAxis3D.grid3DIndex---- number---- 坐标轴使用的 grid3D 组件的索引。默认使用第一个 grid3D 组件。
series--数据:
series-scatter3D. type ** = 'scatter3D'
string
series-scatter3D.name----
string----
系列名称,用于 tooltip 的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {//显示标题
text: 'ECharts 入门示例',//内容
textStyle:{
color:'red'
}
},
tooltip: {},//提示信息
legend: {//图例
data:['一月销量','二月销量']
},
xAxis: {//X轴 横向
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},//Y轴 纵向 动态 根据数据自动计算
series: [{//数据
name: '一月销量',//和legend.data要一致
type: 'line',//line折线图 bar柱状图
data: [5, 20, 36, 10, 10, 20],//和xAxis.data一致
// smooth:1,平滑曲线 1-10
},{
name: '二月销量',//和legend.data要一致
type: 'line',//折线图 柱状图
data: [15, 15, 30, 17, 5, 22.]//和xAxis.data一致
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
效果图