码迷,mamicode.com
首页 > 其他好文 > 详细

Echart 使用图表简单示例

时间:2017-06-25 23:53:34      阅读:358      评论:0      收藏:0      [点我收藏+]

标签:简单   ems   document   应用   gap   img   结果   get   颜色   

简单应用方式:

<div id="main"></div>
引用Echart
<script src="js/echarts.common.min.js"></script>
var myChart = echarts.init(document.getElementById(‘main‘));
     option={

          ...配置项

      }
myChart.setOption(option);

配置项设置:

//两边留白:
boundaryGap:[‘30%‘, ‘30%‘]
//不要刻度线:
axisTick:{
    show:false
},
//设置轴线线宽:
axisLine:{
    lineStyle:{
        width:2
    }
}
//不要网格:
grid:{
    show:false,
}
//Y轴轴线不显示
yAxis : [
    {
        show:false,
    }
//数据结果设置
series : [
    {
        type:‘line‘,
        symbol:‘circle‘,//拐点的形状 实心圆
        symbolSize:24,//拐点的形状的大小
        label:{
            normal:{
                show:true,
                // offset:[0,-10],
                textStyle:{
                    color:"#5181bb",//提示值的字体颜色设置
                }
            }
        },
        itemStyle:{
            normal:{
                color:"#5181bb"
            }
        },
        data:[10, 50, 80, 100, 150, 60],//数据
    }
]

]

技术分享

 

  技术分享

 

 

 更多配置参考 :http://echarts.baidu.com/option.html#xAxis.nameGap

 

Echart 使用图表简单示例

标签:简单   ems   document   应用   gap   img   结果   get   颜色   

原文地址:http://www.cnblogs.com/zjy1017/p/7078405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!