ECharts的简单使用

最新推荐文章于 2024-03-11 15:05:08 发布

想吃凤梨酥

最新推荐文章于 2024-03-11 15:05:08 发布

阅读量430

点赞数

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

原文链接：https://blog.csdn.net/zag666/article/details/123807546

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

介绍

echarts是百度团队开发的，一个基于 JavaScript 的开源可视化图表库，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

下载安装

方法一：下载源文件，使用script标签引入

官网下载网址：https://echarts.apache.org/zh/download.html

通过dist跳到github下载源文件
下载源文件

下载文件后，主要文件放置在dist文件夹下，可以复制主要文件进行开发

引入使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--步骤1-->
  <script src="./js/echarts.min.js"></script>
</head>

<body>
  <!--步骤2-->
  <div id="box" style="width: 400px;height: 400px;background-color: #eee;"></div>
</body>
<script>
  //步骤3
  var myChart = echarts.init(document.getElementById('box'));
  //var myChart = echarts.init(document.querySelector('.box'));
  //步骤4
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
  //步骤5
  myChart.setOption(option);

</script>

</html>

方法二：npm安装

npm install echarts

在vue中使用

<template>
	<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</template>
<script>
import echarts from 'echarts'
export default{
 data(){
 	return{}
 }
 mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
	    // 基于准备好的dom，初始化echarts实例
	    let myChart = echarts.init(document.getElementById('myChart'))
	    // 绘制图表
	     myChart.setOption({
	         title: { text: '在Vue中使用echarts' },
	         tooltip: {},
	         xAxis: {
	             data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	         },
	         yAxis: {},
	         series: [{
	             name: '销量',
	             type: 'bar',
	             data: [5, 20, 36, 10, 10, 20]
	         }]
	     });
    }
  }
}
</script>

按需引入

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

常用配置

标题：title

更多配置项可以参考：传送门

option = {
	title: { // 标题设置
		text: '我是个大标题', // 标题文字
		textStyle: { // 标题文字样式设置
			color: '#999'
		},
		borderWidth: 5, // 标题边框宽度
		borderColor: 'blue', // 标题边框颜色
		borderRadius: 5, // 标题边框圆角
		left: 100, // 标题距离左边的距离
		top: 10 // 标题距离顶部的距离
	},

	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			data: [150, 230, 224, 218, 135, 147, 260],
			type: 'line'
		}
	]
};

在这里插入图片描述

工具按钮：toolbox

更多配置项可以参考：传送门

option = {
	title: { // 标题设置
		text: '我是个大标题', // 标题文字
		textStyle: { // 标题文字样式设置
			color: '#999'
		},
		borderWidth: 5, // 标题边框宽度
		borderColor: 'blue', // 标题边框颜色
		borderRadius: 5, // 标题边框圆角
		left: 100, // 标题距离左边的距离
		top: 10 // 标题距离顶部的距离
	},
	toolbox: { // 工具箱按钮
		feature: {
		saveAsImage: {}, // 导出图片
		dataView: {}, // 数据视图
		restore: {}, // 重置
		dataZoom: {}, // 区域缩放
			magicType: {
				type: ['bar', 'line']
			} // 动态图表类型的切换
		}
	},
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			data: [150, 230, 224, 218, 135, 147, 260],
			type: 'line'
		}
	]
};

在这里插入图片描述

提示：tooltip

更多配置项可以参考：传送门

提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

字符串模板
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
- 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
- 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
- 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
- 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

回调函数
使用示例：

tooltip: { // 工具提示
	// trigger: 'item' 工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
	trigger: 'axis',
	triggerOn: 'click', // 触发时机, click代表点击, mouseOver代表鼠标移过（默认）
	// formatter: '{b} 的成绩是 {c}'
	formatter: function(arg){ // 文字格式化
		return arg[0].name + '的分数是:' + arg[0].data
	}
}

图例：legend

更多配置项可以参考：传送门
legend是图例,用于筛选类别,需要和series配合使用：

legend中的data是一个数组
legend中的data的值需要和series数组中某组数据的name值一致

legend: { 
// 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
  data: ['语文', '数学']
},
xAxis: {
  type: 'category',
  data: xDataArr
},
yAxis: {
  type: 'value'
},
series: [
  {
    name: '语文',
    type: 'bar',
    data: yDataArr1
  },
  {
    name: '数学',
    type: 'bar',
    data: yDataArr2
  }
]

当点击按钮”语文”时下边就会只显示数学项。
请添加图片描述
本文章借鉴：若年封尘的《数据可视化ECharts的七大常用图表，看完就会用(1)》

想吃凤梨酥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts的简单使用

echarts是百度团队开发的，一个基于 JavaScript 的开源可视化图表库，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
复制链接

扫一扫