当前位置：首页 > news >正文

EChart简单入门

news 文章来源：https://blog.csdn.net/2301_79683791/article/details/137440273 2024/10/27 22:24:20

echart的安装就细不讲了，直接去官网下，实在不会的直接用cdn,省的一番口舌。

cdn.staticfile.net/echarts/4.3.0/echarts.min.js

正入话题哈

什么是EChart？

EChart 是一个使用 JavaScript 实现的开源可视化库，Echart支持多种常见的图表类型，如折线图、柱状图、饼图、散点图等，同时还支持地图的绘制和交互。Echart非常灵活和强大，并且拥有活跃的社区支持，在数据可视化领域广泛应用于各种类型的网站和应用程序中。

一.echart的语法构造搭建

第一步

在写echart之前先引入库（像vue，jq,都类似这样，应该不陌生，有点啰嗦了）

<script src="cdn或本地位置"></script>

第二步

身体body部分的搭建

1.先创个盒子吧，你想要图表有多大，就创多大，图表就是放置在这个盒子中

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

2.创完盒子之后呢，开始数据部分吧，怎么将数据应用到图表可视化显示出来呢？

先随便创个值例如：myChart，用myChart来上承接入echart，下接入数据，echart.init表示这是个echart表，后面(document.getElementById('main'))是填写数据位置

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

当然这只是创建echart实例的其中一种方法。

创完值 myChart 之后呢，怎么办？

就是具体的数据结构了，让我们来看看。

3.随便创个名字来承接你要的数据，数据打在这个名字里面，哦对，就打在这个里面，例如取个名字叫option来承接数据：

 var option = {title: {text: '因蓝桥杯摆烂的第无数天'},tooltip: {},legend: {data:['销量tmd']},xAxis: {data: ["内裤","胸罩","丝袜","黑丝","白丝","肉丝"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};

来我们来看看效果

写完数据之后呢？

最后一步

将更改数据填入中介

myChart.setOption(option);

整体来看看：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="自己研究看开头"></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: '因蓝桥杯摆烂的第无数天'},tooltip: {},legend: {data:['销量tmd']},xAxis: {data: ["内裤","胸罩","丝袜","黑丝","白丝","肉丝"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

总结一下：第一步引入库 <script src="cdn或本地位置"></script>

第二步创个容器对象

第三步创个承接对象

第四步创个数据对象，填入数据。

第五步更新数据

五步万能结束，ok了，就这样了。。。。。。。。。。

就再补充点数据方面的知识吧，就是写在数据对象里面的。

二.数据

1.type

type的意思是什么？哦，对，是类型，你先要想好，你要创建的图表是个什么类型。

2.color

color也就是调色盘，想搞什么颜色就搞什么颜色。

调色盘颜色列表。如果没有设置全局颜色，则会依次循环从该列表中取颜色作为系列颜色。

说实话，没啥软用

3.title

也就是标题嘛

看下属性，旁边都有介绍：

 title: {text：               //标题名字x: 'left',                 // 水平安放位置，默认为左对齐，可选为：// 'center' ¦ 'left' ¦ 'right'// ¦ {number}（x坐标，单位px）y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：// 'top' ¦ 'bottom' ¦ 'center'// ¦ {number}（y坐标，单位px）//textAlign: null          // 水平对齐方式，默认根据x设置自动调整backgroundColor: 'rgba(0,0,0,0)',borderColor: '#ccc',       // 标题边框颜色borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，// 接受数组分别设定上右下左边距，同cssitemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，textStyle: {fontSize: 18,fontWeight: 'bolder',color: '#333'          // 主标题文字颜色},subtextStyle: {color: '#aaa'          // 副标题文字颜色}},

4.legend

翻译过来就是图标比例，像怎么布局啊，边框啊

 legend: {data:                   //数据显示orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：// 'horizontal' ¦ 'vertical'x: 'center',               // 水平安放位置，默认为全图居中，可选为：// 'center' ¦ 'left' ¦ 'right'// ¦ {number}（x坐标，单位px）y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：// 'top' ¦ 'bottom' ¦ 'center'// ¦ {number}（y坐标，单位px）backgroundColor: 'rgba(0,0,0,0)',borderColor: '#ccc',       // 图例边框颜色borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，// 接受数组分别设定上右下左边距，同cssitemGap: 10,               // 各个item之间的间隔，单位px，默认为10，// 横向布局时为水平间隔，纵向布局时为纵向间隔itemWidth: 20,             // 图例图形宽度itemHeight: 14,            // 图例图形高度textStyle: {color: '#333'          // 图例文字颜色}},