Echarts简单使用

樱花树下的猫老师

已于 2025-04-20 09:16:13 修改

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： echarts 前端 javascript

于 2023-09-08 15:32:05 首次发布

本文链接：https://blog.youkuaiyun.com/u011798348/article/details/132761388

版权

前端专栏收录该内容

3 篇文章

订阅专栏

一、引入

1、利用标签，引入在网上下载好的 echarts.min.js。

2、在普通 javascript，可以直接编写 echarts 的图表对应的方法；

在 vue 中，需要先在 vue 的 created 方法（vue 最初始化时加载的方法）中，对要引入的 echarts 图表的方法进行加载，然后，在 methods:中，对该对应方法进行 echarts 编写。

二、组件说明

1、饼状图方法范例：

initAbc() {
	var chartDom = echarts.init(document.getElementById('abc')); //把id为abc的标签，先获取element，然后加载到echarts的chartDom中
	var option = {
		title: [ //标题组
			{
				text: '经济占比', //标题名称-主标题
				x: 'center', //标题水平位置，x(也可写作left、right)：left/center/right
				y: 'top', //标题垂直位置，y(也可写作top、bottom)：top/center/bottom
				textStyle: { //文字类型
					color: 'black', //文字颜色
					fontSize: '20px', //文字尺寸
					fontFamily: 'fangsong', //文字字体
					fontWeight: 1000 //文字粗细
				}
			}, {
				subtext: '重点信息', //标题名称-副标题
				subtextStyle: {
					color: 'green', //标题名称-副标题颜色
				}

			}
		],
		grid: { //图表整体
			top: '15%', //图表顶端距离，可以为百分比和数字
			bottom: '15%', //图表底端距离，可以为百分比和数字
			left: '15%', //图表左端距离，可以为百分比和数字
			right: '65%' //图表右端距离，可以为百分比和数字
		},
		tooltip: { //提示框
			show: true, // 是否显示提示框组件
			trigger: 'item', // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）
			axisPointer: {
				type: 'cross', // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
				snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
				label: {
					margin: 10, // label 距离轴的距离
					color: '#FFF', // 文字的颜色
					fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
					fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
					fontSize: '20', // 文字字体大小
					lineHeight: '50', // 行高
					padding: [5, 7, 5, 7], // 内边距，单位px
					backgroundColor: 'pink', // 文本标签的背景颜色
				},
				animation: true, // 是否开启动画
				animationDuration: 1000, // 初始动画时长
				animationDurationUpdate: 200, // 数据更新动画的时长
			},
			showContent: true, // 是否显示提示框浮层，默认显示
			alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
			triggerOn: 'mousemove|click', // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
			confine: true, // 是否将 tooltip 框限制在图表的区域内
			backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
			padding: 5, // 提示框浮层内边距，单位px
			textStyle: {
				color: '#FFF', // 文字的颜色
				fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
				fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
				fontSize: '20', // 文字字体大小
				lineHeight: '50', // 行高
			}
		},
		legend: { //图例说明
			data: ['中国', '美国'], //图例条目名称，对应series中data的数组下的具体条目的name，对应不上则不生效
			right: 'center', //x(也可写作left、right)：left/center/right
			bottom: 'top', //y(也可写作top、bottom)：top/center/bottom
			orient: 'horizontal', //垂直摆放-vertical;水平摆放-horizontal
			backgroundColor: '#66ff66', //图例说明组件的背景颜色
			borderColor: '#6666ff', //边框颜色
			borderWidth: 1, //边框宽度
			padding: 1, //内边距大小
			itemGap: 1, //条目间距
			itemWidth: 25, // 图例宽度
			itemHeight: 5, //图例说明组件条目的高度
			textStyle: { //文字类型
				color: 'red', //文字颜色
				fontSize: '20px', //文字尺寸
				fontFamily: 'fangsong', //字体
				fontWeight: 1000 //文字粗细
			},
			icon: 'circle', //名称前的样式类型：circle, rect, roundRect, triangle, diamond, pin, arrow, none
			selected: { //默认是否被选中展示
				'中国': false, //false：默认不展示
				'美国': true //true：默认展示
			}
		},
		series: [{
			type: 'pie', //组件类型
			label: { //修改饼状图标签的属性
				show: true, //控制标签是否显示
				position: 'inside', //控制标签位置:inside-在图块内部；outside-在图块外部
				formatter: '{d}%', //控制标签显示百分值
				color: 'black' //标签的颜色
			},
			labelLine: { //标签线，当标签处于图块外部时起作用
				lineStyle: {
					color: 'rgba(0, 255, 255, 0.3)' //标签线颜色
				},
				smooth: 0.2,
				length: 10,
				length2: 20
			},

			radius: ['40%', '70%'], //修改饼状图的内环和外环位置
			data: [{
					name: '中国', //组件分部名称
					value: 111, //组件分部对应值
					itemStyle: { //组件分部样式设置
						color: "#ff0000", //组件分部颜色
					}
				},
				{
					name: '美国',
					value: 156,
					itemStyle: {
						color: "#00d693"
					}
				}
			],
			emphasis: { //选中时特效
				itemStyle: {
					shadowBlur: 100, //选中后阴影范围
					shadowOffsetX: 11,
					shadowColor: 'rgba(55, 223, 0, 0.5)' //选中后阴影颜色
				}
			}
		}]
	}
	chartDom.setOption(option); //对已经包含id为abc的标签，对应的element，设置option，option内容就是上面设定的内容
}

2、柱状图方法范例：

initAbc() {
	var chartDom = echarts.init(document.getElementById('abc'));
	var option = {
		title: {
			text: '国家经济对比',
			left: 'center',
			top: 'top'
		},
		grid: {
			top: '20%',
			bottom: '20%',
			left: '5%',
			right: '5%'
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "cross",
				crossStyle: {
					color: "#999"
				}
			}
		},
		legend: {
			itemGap: 100,
			textStyle: {
				color: "#000"
			},
			bottom: 'bottom',
			left: 'center',
			data: ['中国', '美国', '俄国', '法国', '四国GDP总和增长率']
		},
		xAxis: [ //x坐标轴的内容，这里为时间，x轴和y轴互换，图表可以由纵向变为横向
			{
				type: "category",
				name: "time",
				axisLabel: {
					fontWeight: "bold",
					show: true,
					textStyle: {
						fontSize: "14px"
					}
				},
				data: [2015, 2016, 2017, 2015, 2019]
			}
		],
		yAxis: [ //y坐标轴的内容，注意无内容则使用大括号{}而不是中括号[]，中括号只用于数组
			{
				type: 'value',
				name: '人均收入'
			},
			{
				type: 'value',
				name: 'GDP增长率'
			}
		],
		series: [ //统计的数据内容，为中国、美国、俄国、英国在相应的x轴（时间）下的对应值
			{
				name: "中国",
				type: "bar",
				yAxisIndex: 0, //对标y轴数组的第几个值，这里为第0个
				stack: 'ss', //设置了stack以后，相同stack的柱会进行合并堆叠
				barMaxWidth: 10, //设置柱状图最大宽度
				data: [11, 2, 3, 4, 5],
				itemStyle: {
					color: "rgb(242, 143, 133)"
				}
			},
			{
				name: "美国",
				type: "bar",
				yAxisIndex: 0,
				stack: 'ss',
				data: [1, 2, 3, 4, 5],
				itemStyle: {
					color: "rgb(183, 222, 232)"
				}
			},
			{
				name: "俄国",
				type: "bar",
				yAxisIndex: 0,
				stack: 'ss',
				data: [17, 2, 31, 4, 5],
				itemStyle: {
					color: "rgb(13, 222, 232)"
				}
			},
			{
				name: "法国",
				type: "bar",
				yAxisIndex: 0,
				stack: 'ss',
				data: [51, 2, 3, 4, 15],
				itemStyle: {
					color: "rgb(183, 22, 232)"
				}
			},
			{
				name: "四国GDP总和增长率",
				type: "line",
				yAxisIndex: 1,
				data: [0.2, 0.3, 0.1, 0.6, 0.5],
				itemStyle: {
					color: "rgb(0, 22, 232)"
				}
			}
		]
	};
	chartDom.setOption(option);
}

组件置于vue中

1、组件置于vue的使用

如下

<script>
    import * as echarts from "echarts"
    export default {
        data() {
            return {};
        },
        mounted() {  // 替换 created
            this.initAbc();
        },
        methods: {
            ck1() {
                alert(this.vl1);
            },
            initAbc() {
                var chartDom = echarts.init(this.$refs.div1); //这里利用vue的获取element的方式，在refs中获取先获取element，然后加载到echarts的chartDom中，这里注意下面的html，要对这个承载的div定义宽高，用以接收echarts
                var option = {
                    series: [{
                        type: 'pie', //组件类型
                        label: { //修改饼状图标签的属性
                            show: true, //控制标签是否显示
                            position: 'inside', //控制标签位置:inside-在图块内部；outside-在图块外部
                            formatter: '{d}%', //控制标签显示百分值
                            color: 'black' //标签的颜色
                        },
                        labelLine: { //标签线，当标签处于图块外部时起作用
                            lineStyle: {
                                color: 'rgba(0, 255, 255, 0.3)' //标签线颜色
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },

                        radius: ['40%', '70%'], //修改饼状图的内环和外环位置
                        data: [{
                                name: '中国', //组件分部名称
                                value: 111, //组件分部对应值
                                itemStyle: { //组件分部样式设置
                                    color: "#ff0000", //组件分部颜色
                                }
                            },
                            {
                                name: '美国',
                                value: 156,
                                itemStyle: {
                                    color: "#00d693"
                                }
                            }
                        ]
                    }]
                }
                chartDom.setOption(option);
            }

        }
    }
</script>
<template>
    <div id ="abc" style="width: 600px; height: 400px;"></div>
</template>

2、created和mounted这两个函数的区别

在Vue.js中，created和mounted是生命周期钩子函数，它们在组件的不同阶段被调用，主要区别如下：

created：在Vue实例创建完成后立即调用，此时组件的响应式数据（data）和事件机制已初始化，但DOM尚未渲染，无法操作DOM元素。仅实例创建时一次
mounted：在组件挂载到DOM后调用，此时模板已编译并插入页面，可以安全操作DOM或初始化依赖DOM的第三方库（如ECharts、地图插件等）。仅初次挂载时一次（除非动态组件）。