echarts的使用

最新推荐文章于 2024-02-23 21:10:08 发布

caimaomaocai

最新推荐文章于 2024-02-23 21:10:08 发布

阅读量8.7k

点赞数

本文链接：https://blog.csdn.net/caimaomaocai/article/details/80982217

版权

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

因为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选项即可

(完）

caimaomaocai

关注

0
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
echarts的使用

这两天学习了好多新知识，开心因为echarts是纯js的图标库，所以不依赖于jq,我们只需要到官网把源码下载下来。引入就可以使用打开echarts官网点击下载，来到如下图所示页面，点击源代码下载在html文件中引入echarts如下&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&...
复制链接

扫一扫