// 1.加载相应的js文件
<script src="echarts.min.js"></script>
// 2.创建需要放入的div
<div id="main" style="width: 600px;height:400px;"></div>
// 3.填写相应的代码
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); option = { title: { // 图表标题 text: '某楼盘销售情况', // 大标题 subtext: '纯属虚构' // 二级标题 }, tooltip: { // 提示框组建,鼠标停留时显示 trigger: 'axis' }, legend: { // 图例组建 data:['意向','预购','成交'] , selectedMode : false,// 不关半数据点 }, toolbox: { // 工具栏 show: true, feature: { magicType: { show: true, type: ['bar', 'tiled'] // 切换显示图表 }, saveAsImage: {show: true} // 保存为图片 } }, xAxis: [{// // 直角坐标系 grid 中的 x 轴,最多可做出两个x轴 type: 'category', boundaryGap: false, position : 'top', // 默认为bottom data: ['周一','周二','周三','周四','周五','周六','周日'] }], yAxis: [{ // 直角坐标系 grid 中的 y 轴,最多可做出两个y轴 type: 'value' }], series: [{ // 系列列表,也就是数据图 name: '成交', type: 'line',// 图表类型 smooth: true, // 是否平滑曲线显示 showAllSymbol : true, // 显示所有点 symbol : 'circle', // 数据点的形状,默认为圆点 data: [10, 12, 21, 54, 260, 830, 710], lineStyle:{ normal:{color : "blue"} } },{ name: '预购', type: 'line', smooth: true, data: [30, 182, 434, 791, 390, 30, 10] },{ name: '意向', type: 'line', smooth: true, data: [, ,601, 234, 120, 90, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
其它相应的属性可查看API
// 如果想要动态附值数据,可以添加如下代码
myChart.setOption(option, true); // 使用刚指定的配置项和数据显示图表。 myChart.setOption({ series: [{ name: '意向', // 必须和series的name属性相同 data: [1,2,3,4,5] }] });
// 想要隐藏线,只需把线的透明度设为0便可
lineStyle:{
normal:{
opacity : 0
}
}
// 鼠标提示框,只需要在tooltip里,设置backgroundColor属性
backgroundColor : '#666'