echarts的使用

这两天学习了好多新知识,开心


因为echarts是纯js的图标库,所以不依赖于jq,我们只需要到官网把源码下载下来。引入就可以使用

打开echarts官网点击下载,来到如下图所示页面,点击源代码下载


在html文件中引入echarts如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>echarts练习</title>
	<script src="js/echarts.js"></script>//引入echarts
</head>
<body>

	<div id="box" style="width:600px;height:400px;border:1px solid #ccc"></div>//装载数据表的容器
	

	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('box')) //获取装载数据表的容器
        

        var option = {
        	 title : {
        text: '',
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        icon:'rect',
    	itemWidth:15,
    	itemHeight:8,
    	itemGap:10,
        data:['本月达标','上月达标'],
        right:'20px',
        textStyle:{
        	fontSize:12,
        	color:'#ccc'
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [

        {
            name:'本月达标',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[12330, 12334, 13300, 13444, 13000, 12567, 13400,12450,13000,13200,12343,13452,12345,12333]
        },
        {
            name:'上月达标',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[15200, 16534, 15433, 15678, 16435, 15444, 16000]
        }
    ]
        }





		myChart.setOption(option)//把echarts配置项启动
	</script>
</body>
</html>

效果图:


关键部分代码

修改legend的默认样式


我们在echarts官网配置好的option拷贝到代码中时会发现legend中的

下图部分也会跟着拷贝过来



要想去除该部分的效果,我们只需要把配置项中的

toolbox选项删除即可



关于修改默认颜色的部分呢



此时的效果图为



修改x,y轴的颜色



修改网格线颜色



此时的网格线是这样的



如果想去除网格线,只需在splitLine上添加show:false选项即可


(完)

原文链接:加载失败,请重新获取