echart小结

最新推荐文章于 2022-04-13 21:37:30 发布

x_1213

最新推荐文章于 2022-04-13 21:37:30 发布

阅读量802

点赞数 2

CC 4.0 BY-SA版权

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/x_1213/article/details/121664102

本文简要总结了数据可视化库echarts的核心概念，包括instance实例、series系列、tooltip提示、legend图例、xAxis和yAxis轴、toolbox工具箱、dataZoom缩放以及virtualMap虚拟映射。强调了在HTML中使用echarts的基础，并提醒读者阅读官方文档的重要性，以深入学习echarts。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来了来了,小编又来做总结了，今天学了echart，首先我们要知道echart是一个数据可视化图表库

HeightCharts，D3是echart的同行，但是小编今天只学了echart，所以今天只能总结一下echart了。

核心概念

instance实例

serues系列

tooltip提示

legend图例

xAxis x轴
yAxis y轴

toolbox 工具箱

daraZoom 缩放

vitualMap 虚拟映射

在讲这些之前我们先来了解一下在html里要怎么使用echart

<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
//首先要读入js
<style type="text/css">
		#container {
			width: 800px;
			height: 600px;
		}
</style>
<div id="container"></div>
//创建好dom，定义宽高

var myChart = echarts.init(document.getElenmentById('container'));
//基于准备好的dom，初始化echarts实例
var option ={
    title：{
        text：'ECharts 入门示例'
    },
    tooltip:{},
    legend:{
        data:['销量']
    }，
    xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},
    series:[
        {
        name:"销量"，
        type："bar",
        data:[5,20,36,10,10,20]    
    }
    ]
};
//指定图标的配置项和数据
myChart.setOption(option);
//使用刚指定的配置项和数据显示图标