Echarts图形库的使用、动态数据获取及交互组件的使用

最新推荐文章于 2023-04-11 12:23:49 发布

DOM曼珠沙华

最新推荐文章于 2023-04-11 12:23:49 发布

阅读量4.3k

点赞数 2

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/a18792627168/article/details/106763565

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上。

使用（五步）

第一步：导入echarts

1.浏览器

<script type="text/javascript" src="js/echarts.js"></script>

文件下载可查看官网进行下载

2.npm安装

安装echarts:

npm install echarts --save

安装完成后，需要在使用echarts的文件内导入echarts：

import echarts from 'echarts'

第二步：创建存放图表的容器

<div id="main" style="width: 750px; height: 400px;"></div>

第三步：基于准备的dom，初始化eacherts实例

初始化图标必须在页面上的dom结构渲染完毕后才能初始化

var myChart = echarts.init(document.getElementById('main'))

第四步：准备数据和配置项

var option = {
	title:{
		text:'ECharts 数据统计'
	},
	tooltip:{},
	legend:{
		data:['用户来源']
	},
	xAxis:{
		data:["Android","IOS","PC","Ohter"]
	},
	yAxis:{

	},
	series:[{
		name:'访问量',
		type:'line',
		data:[500,200,360,100]
	}]
};

第五步：展示数据

myChart.setOption(option)

完整过程：

这个是vue项目内使用图标的代码

<template>
    <div>
        <!-- 初始化图表必须在页面上的dom结构渲染完毕后才能初始化 -->
        <el-card>
            <!-- 2.为echartsz准备一个具备大小（宽高）的DOM -->
            <div id="main" style="width: 750px; height: 400px;"></div>
        </el-card>
    </div>
</template>

<script>
// 1.导入echarts
import echarts from 'echarts'
    export default {
        data() {
            return {}
        },
        mounted() {
            // 3.基于准备的dom，初始化eacherts实例
            var myChart = echarts.init(document.getElementById('main'))

           
            // 4.准备数据和配置项
            const option = {
				title:{
					text:'ECharts 数据统计'
				},
				tooltip:{},
				legend:{
					data:['用户来源']
				},
				xAxis:{
					data:["Android","IOS","PC","Ohter"]
				},
				yAxis:{

				},
				series:[{
					name:'访问量',
					type:'line',
					data:[500,200,360,100]
				}]
			};

            // 5.展示数据
            myChart.setOption(result)
        }
    }
</script>

<style lang="less" scoped>

</style>

效果展示：

当使用柱状图时，也是很简单的，将 series里的type 值修改为"bar"

饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。

        var option = {
            title:{
                text:'ECharts 数据统计'
            },            
            series:[{
                name:'访问量',
                type:'pie',    
                radius:'60%', 
                data:[
                    {value:500,name:'Android'},
                    {value:200,name:'IOS'},
                    {value:360,name:'PC'},
                    {value:100,name:'Ohter'}
                ]
            }]
        };

动态数据获取

如果是自己模拟数据，可查看教程

这里采用axios动态数据获取，看结构即可，不需安装：

async mounted() {

	var myChart = echarts.init(document.getElementById('main'))

	// 动态数据获取
	const {data: res} = await this.$http.get('reports/type/1')
	if(res.meta.status !== 200){
		return this.$message.error('获取折线图失败！')

	}

	const option = res.data

	myChart.setOption(option)
}

在第三步与第四步中间添加了数据获取部分，将获取得到的数据赋给option最后进行展示。

option内属性

标题： title

title: {
    text: '第一个 ECharts 实例'
}

提示信息

tooltip: {},

图例组件

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}

X 轴

配置要在 X 轴显示的项:

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

Y 轴

配置要在 Y 轴显示的项。

yAxis: {}

系列列表

每个系列通过 type 决定自己的图表类型：

series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

每个系列通过 type 决定自己的图表类型：

type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图

等等，详细的可以戳这里~

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        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);
    </script>
</body>
</html>

dataZoom 数据区域缩放组件

dataZoom属于交互组件，

dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。

默认情况下 dataZoom 控制 x 轴，即对 x 轴进行数据窗口缩放和数据窗口平移操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 750px; height: 400px;"></div>
		<script src="echarts.min.js" ></script>
		<script type="text/javascript">
			
			var myChart = echarts.init(document.getElementById('main'));

			// 交互组件的使用
			var option = {
				title: {
					text: 'dataZoom测试样例'
				},
	            tooltip: {},
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [
                    {   // 这个dataZoom组件，默认控制x轴。
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        start: 10,      // 左边在 10% 的位置。
                        end: 60         // 右边在 60% 的位置。
                    },
                    {   // 这个dataZoom组件，也控制x轴。
			            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
			            start: 10,      // 左边在 10% 的位置。
			            end: 60         // 右边在 60% 的位置。
			        }
                ],
                series: [
                    {
                        type: 'scatter', // 这是个『散点图』
                        itemStyle: {
                            opacity: 0.8
                        },
                        symbolSize: function (val) {
                            return val[2] * 40;
                        },
                        data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
                    }
                ]
            }
			myChart.setOption(option)
			
		</script>
	</body>
</html>

参考：ECharts.js学习（一）简单入门

ECharts 交互组件