html
页面引用js <script type="text/javascript" src="assets/js/echarts.min.js"></script>css和html*{padding:0;margin:0;border: 0;}<div id="container" style="width:630px;height:250px;margin:20px auto"></div>
js
var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};option = null;option = {title : {// text: 'Monthly Repayment (estimated)',subtext: 'Renta：$/qft2',x:'left',top:10},tooltip: {trigger: 'axis',axisPointer: {type: 'line',lineStyle:{color:'#faa12f'},z:1},backgroundColor:'rgb(255,255,255)',extraCssText:'box-shadow:0 0 3px 3px rgba(0, 0, 0, 0.3)',textStyle:{color:'#333'},},//x轴xAxis: {type: 'category',//boundaryGap: false,//splitLine:{show: false},//去除网格线//splitArea : {show : false},//去除网格区域data: ['3mth', '4mth', '5mth', '6mth', '7mth', '8mth', '9mth'],axisLine: {//x轴线设置lineStyle: {type: 'solid',color: '#f0f0f0',//x线的颜色width:'1'//坐标线的宽度}},axisLabel: {//x轴字体颜色textStyle: {color: '#949494',}},axisTick:{//去掉x轴刻度show: false} },yAxis: {type: 'value',//name: 'Renta：$/qft2', splitLine:{//保留网格线show: true,lineStyle:{//y轴网格线设置color: '#f9f9f9',width: 1,type: 'solid'} },splitArea : {show :false},//去除网格区域axisLine: {//y轴线设置lineStyle: {type: 'solid',color:'#f0f0f0',width:'1'}},axisLabel: {//y轴字体颜色textStyle: {color: '#949494'}}, axisTick:{//去掉Y轴刻度show: false}},series: [{data: [1800, 2200, 3600, 3000, 2000, 2900, 2500],type: 'line',symbol:"circle",//设定为实心点 类型 ： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'symbolSize:6,//圆点大小//showSymbol:true,hoverAnimation:true,animation: true,itemStyle: {normal: {color: "#faa12f",//圆点颜色borderColor:'rgba(251,222,153,0.5)',borderWidth:8, lineStyle: {//折线颜色大小type:'solid', //'dotted'虚线 'solid'实线color: "#faa12f",width:1,borderColor:'#faa12f', //拐点边框颜色}}},//textStyle:{//x、y轴字体颜色大小// fontSize:12,// color:'#949494'//}, }],};if (option && typeof option === "object") {myChart.setOption(option, true);}
预览效果
