echartjs学习（1）

最新推荐文章于 2024-12-14 16:39:22 发布

yuan_crazycode

最新推荐文章于 2024-12-14 16:39:22 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

分类专栏： echartjs 前端

本文链接：https://blog.youkuaiyun.com/yuan_crazycode/article/details/90378494

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

echartjs

1 篇文章

订阅专栏

博客介绍了Echarts相关技巧。为节约内存、减少打包体积，使用图时可只引用所需模块；初始化图表时能直接设置背景主题，除默认的‘light’和‘dark’主题，还可从官网主题编辑器下载所需主题，再通过require调用。

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

使用webpack实现的echatjs

1、在配置好webpack之后，终端输入 npm install echarts --save下载
2、开始使用：

	var echarts = require("echarts");            
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	//两种使用
	`//1、柱状图
	 // 指定图表的配置项和数据
	 var option = {
	     title: {
	         text: 'ECharts 入门示例'
	     },
	     tooltip: {},
	     legend: {
	         data:['销量']
	     },
	     xAxis: {
	         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	     },
	     yAxis: {},
	     series: [{
	         name: '销量',
	         type: 'bar',
	         data: [5, 20, 36, 10, 10, 20]
	     }]
	 };
	 // 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	//2.
	// 饼图
	 echarts.init(document.getElementById('main')).setOption({
	    series: {
	        type: 'pie',
	        data: [
	            {name: 'A', value: 1212},
	            {name: 'B', value: 2323},
	            {name: 'C', value: 1919}
	        ]
	    }
	});

3.为了节约内存，也就是减少打包后的体积，可以在使用图的时候，只引用你需要的模块，例如上面实现的柱状图时使用的require语句可以改成如下的代码：

// var echarts = require("echarts/lib/echarts");
// //引入柱状图
// require("echarts/lib/chart/bar")
// //引入提示框和标题组件
// require("echarts/lib/component/tooltip")
// require("echarts/lib/component/title")

4.echarts在初始化图表时，可以直接设置背景主题
例如 var chart = echarts.init(dom, ‘light’);或者dark，
除了这两种默认的主题之外
还可以官网提供的主题编辑器去下载你需要的主题
https://echarts.baidu.com/theme-builder/
然后通过require(’./’)调用