数据可视化高级技术Echarts(快速上手&柱状图)

目录

1.Echarts的配置

 2.程序的编码

3.柱状图的实现

相关属性介绍:

1.标记最大值/最小值

2.标记平均值

3.柱的宽度

4. 横向柱状图

5.colorBy

series系列(需要构造多组数据才能实现,下面有Sale和Sale1两组数据)

data系列(同一组数据每个柱状图不同的显示)

6.showBackground

7.label


1.Echarts的配置

        在  src  下新建目录JS,将echarts.js放入其中(这个是Eclipse的截图,其他开发IDE只需要引入echarts.js即可)

注意:Eclipse需要创建Dynamic Web Project才能运行

 2.程序的编码

        回顾五个基本步骤(通过简单的5个步骤, 就能够把一个简单的图表显示在网页中了。这几个步骤中, 步骤4最重要,一个图表最终呈现什么样,完全取决于这个配置项。所以对于不同的图表, 除了配置项会发生改变之外,其他的代码都是固定不变的。

1.导入ECharts插件

<script type="text/javascript">

2.为ECharts准备一个DOM容器

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

3.基于准备好的DOM,初始化echarts实例

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

4. 指定图表的配置项和数据(对ECharts进行一些配置)

var option={ }

5.将配置和参数传递给ECharts,显示图表

myChart.setOption(option);

3.柱状图的实现

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
<script src="JS/echarts.js"></script>  
</head>  
<body>  
<div id='main' style="width:600px;height:400px"></div>  
<script>  
var chartDom = document.getElementById('main');  
var myChart = echarts.init(chartDom);  
var option;  

option = {
		/* 设置x轴数据 */
		xAxis:{
			data:["冰箱","电视","洗衣机","手机","微波炉"]
		},
		/* 设置x轴数据 */
		yAxis:{
			
		},
		/* 填写series序列的类型 */
		series:{
			type:'bar', /* 设置图标类型 */
			data:[200,128,150,340,178] /* 插入数据 */
		},
		/* 设置提示框 */
		tooltip:{
			
		},
		/* 添加标题 */
		title:{
			text:'电器销售图' /* 设置文本内容 */
		}
}; 

myChart.setOption(option);   
</script>  
</body>  
</html>

相关属性介绍:

1.标记最大值/最小值

2.标记平均值

3.柱的宽度

4. 横向柱状图

5.colorBy

从调色盘 option.color 中取色的策略,可取值为:

  • 'series':按照系列分配调色盘中的颜色,同一系列中的所有数据都是用相同的颜色;
  • 'data':按照数据项分配调色盘中的颜色,每个数据项都使用不同的颜色。
series系列(需要构造多组数据才能实现,下面有Sale和Sale1两组数据)
option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    colorBy: "series"
  },
  {
    name: "Sale1",
    type: "bar",
    data: [3, 25, 76, 18, 14, 4, 10],
    colorBy: "series"
  }
  ]
}

data系列(同一组数据每个柱状图不同的显示)
option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    colorBy: "data"
  }
  ]
}

6.showBackground
  • 是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
  • 每一个柱条的背景样式。需要将 showBackground 设置为 true 时才有效。

注意:两个参数需要同时使用才能生效

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

7.label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。

  • show:是否显示标签
  • distance:距离图形元素的距离
  • rotate:旋转标签。从-90°到90°。正值是逆时针。
  • offset:文字偏移量。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40
option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    colorBy: "series",
    legendHoverLink: true,
    label: {
      show: true,
      distance: 5,
      rotate: 50,
      offset: [5, 8]
    }
  }]
}

最近更新

  1. leetcode705-Design HashSet

    2024-04-02 06:40:02       8 阅读
  2. Unity发布webgl之后打开streamingAssets中的html文件

    2024-04-02 06:40:02       8 阅读
  3. vue3、vue2中nextTick源码解析

    2024-04-02 06:40:02       8 阅读
  4. 高级IO——React服务器简单实现

    2024-04-02 06:40:02       8 阅读
  5. 将图片数据转换为张量(Go并发处理)

    2024-04-02 06:40:02       7 阅读
  6. go第三方库go.uber.org介绍

    2024-04-02 06:40:02       8 阅读
  7. 前后端AES对称加密 前端TS 后端Go

    2024-04-02 06:40:02       9 阅读

热门阅读

  1. 禁止软件访问外网

    2024-04-02 06:40:02       1 阅读
  2. Git简介

    Git简介

    2024-04-02 06:40:02      1 阅读
  3. kafka面试常见问题

    2024-04-02 06:40:02       3 阅读
  4. redis -List

    2024-04-02 06:40:02       4 阅读