echarts运用

1. *.vue版本的echarts

首先在终端下载导入echarts的依赖

对于Vue 2项目

npm install echarts vue-echarts@5.0.1

对于Vue 3项目：

npm install echarts vue-echarts@6.0.0

然后随便创建一个空的.vue项目

然后根据自己的要求去Apache ECharts的网站找图表

Apache ECharts的网站

https://echarts.apache.org/zh/index.html

2.在<script>复制粘贴ECharts的代码

<script> import * as echarts from 'echarts';--引入ECharts的依赖 --后面就是复制粘贴ECharts的图表代码 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; 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' } ] }; option && myChart.setOption(option); </script>

3.接着在<template>里搞个容器

注意这里的id和上面的var chartDom = document.getElementById('main')中的id的main是一样的

<template> <div id="main" style="width: 900px; height: 420px;"></div> </template>

以上是静态的，接着来说动态的

差别就是ECharts的数据data挖空删掉和异步请求

<script> import * as echarts from 'echarts';--引入ECharts的依赖 --后面就是复制粘贴ECharts的图表代码 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [ { data: [], type: 'bar' } ] }; option && myChart.setOption(option); fetch("自己的请求路径") .then(response => { if (!response.ok) throw new Error('请求失败'); return response.json(); }) .then(res => { res.forEach(item => { option.xAxis.data.push(根据自己要什么写); option.series[0].data.push(同上); //比如 // option.xAxis.data.push(item.name); // option.series[0].data.push(item.totalAmount); }); console.log(res); // 移到 forEach 外部（可选优化） myChart.setOption(option); // 数据填充后再渲染 }) .catch(error => { // 增加异常捕获（避免崩溃） console.error('数据请求失败：', error); }); </script>

最后你只要写出来大概然后给ai优化一下就可以了

2. *.hmtl版本的echarts

1.下载并引用echarts.js文件

下载地址：下载 -Apache ECharts

你可以点击Dist下载最新版的或者点击查看历史版本下载你想要的版本

在vscode中将echarts.min.js文件放在项目的根目录下的js文件夹下

2.创建index.html文件

2.1在html文件里面引用echarts.min.js创建DOM容器用来存放用ECharts生成的图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据可视化</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <!-- 头部的盒子 --> <header> <h1>数据可视化-Echarts</h1> <div class="showTime"></div> <script> var t = null; // 初始化定时器，每秒更新显示时间 t = setTimeout(time, 1000);//開始运行 function time() { clearTimeout(t);//清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours();//获取时 var m = dt.getMinutes();//获取分 var s = dt.getSeconds();//获取秒 // 更新页面显示的时间 document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; t = setTimeout(time, 1000); //设定定时器，循环运行 } </script> </header> <!-- 页面主体部分 --> <section class="mainbox"> <div class="column"> <!-- 柱形图展示就业行业数据 --> <div class="panel bar"> <h2>柱形图-就业行业</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> <!-- 折线图展示人员变化趋势 --> <div class="panel line"> <h2>折线图-人员变化 <a href="javascript:;">2020</a><a href="javascript:;">2021</a></h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> <!-- 饼形图展示年龄分布数据 --> <div class="panel pie"> <h2>饼形图-年龄分布</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> </div> <div class="column"> <!-- 该模块用于展示前端需求与市场供应人数对比 --> <div class="no"> <div class="no-hd"> <ul> <li>123456</li> <li>101010</li> </ul> </div> <div class="no-bd"> <ul> <li>前端需求人数</li> <li>市场供应人数</li> </ul> </div> </div> <!-- 地图模块，可能用于展示地域相关数据 --> <div class="map"> <div class="map1"></div> <div class="map2"></div> <div class="map3"></div> <div class="chart"></div> </div> </div> <div class="column"> <!-- 柱形图展示就业形势数据 --> <div class="panel bar2"> <h2>柱形图-就业形势</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> <!-- 折线图展示播放量数据 --> <div class="panel line2"> <h2>折线图-播放量</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> <!-- 饼形图展示地区分布数据 --> <div class="panel pie2"> <h2>饼形图-地区分布</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> </div> </section> <!-- 引入外部JavaScript库和自定义脚本 --> <script src="./js/flexible.js"></script> <script src="./js/echarts.min.js"></script> <script src="./js/jquery.js"></script> <script src="./js/china.js"></script> <script src="./js/index.js"></script> </body> </html>

2.2初始化echarts实例

在项目的根目录下面的js目录里面创建一个index.js文件来写用ECharts生成图表的代码

初始化echarts实例示例代码

//实例化对象 var myChart = echarts.init(document.querySelector('.bar .chart'));

2.3指定配置项以及数据

//指定配置项和数据 var option = { color: ['#2f89cf'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, //修改图标的大小 grid: { left: "0%", top: "10px", right: "0%", bottom: "4%", containLabel: true }, xAxis: [ { type: 'category', data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"], axisTick: { alignWithLabel: true }, //修改刻度标签 相关样式 axisLabel: { color: "rgba(255,255,255,.6)", fontSize: "8", // interval: 0 }, //不显示x坐标轴的样式 axisLine: { show: false } } ], yAxis: [ { type: 'value', //修改刻度标签 相关样式 axisLabel: { color: "rgba(255,255,255,.6)", fontSize: "12" }, //不显示x坐标轴的样式 axisLine: { lineStyle: { color: "rgba(255,255,255,.1)", width: 2 } }, //y轴分割线样式 splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } } } ], series: [ { name: 'Direct', type: 'bar', barWidth: '35%', data: [200, 300, 300, 900, 1500, 1200, 600], itemStyle: { //修改柱子圆角 barBorderRadius: 5 } } ] };

2.4把配置项给实例对象

myChart.setOption(option);

4.柱状图

//柱状图1 // 立即执行函数，用于封装柱状图的配置和初始化 (function () { // 1. 实例化 ECharts 对象并绑定到指定的 DOM 元素 var myChart = echarts.init(document.querySelector('.bar .chart')); // 2. 定义柱状图的配置项 var option = { // 定义图表的主题颜色 color: ['#2f89cf'], // 提示框组件配置，用于交互时的信息提示 tooltip: { trigger: 'axis', // 触发类型为坐标轴触发 axisPointer: { // 指示器配置 type: 'shadow' // 类型为阴影指示器 } }, // 网格组件配置，控制图表的网格位置和大小 grid: { left: "0%", // 左边距 top: "10px", // 顶部距 right: "0%", // 右边距 bottom: "4%", // 底部距 containLabel: true // 网格是否包含坐标轴的标签 }, // X 轴配置 xAxis: [ { type: 'category', // 类型为类目轴 data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"], // 类目数据 axisTick: { // 坐标轴刻度的配置 alignWithLabel: true // 刻度线与标签对齐 }, // X 轴标签的样式配置 axisLabel: { color: "rgba(255,255,255,.6)", // 标签颜色 fontSize: "8", // 标签字体大小 }, // X 轴轴线的样式配置 axisLine: { show: false // 不显示轴线 } } ], // Y 轴配置 yAxis: [ { type: 'value', // 类型为数值轴 // Y 轴标签的样式配置 axisLabel: { color: "rgba(255,255,255,.6)", // 标签颜色 fontSize: "12" // 标签字体大小 }, // Y 轴轴线的样式配置 axisLine: { lineStyle: { // 轴线样式配置 color: "rgba(255,255,255,.1)", // 轴线颜色 width: 2 // 轴线宽度 } }, // Y 轴分割线的样式配置 splitLine: { lineStyle: { // 分割线样式配置 color: "rgba(255,255,255,.1)" // 分割线颜色 } } } ], // 系列配置 series: [ { name: 'Direct', // 系列名称 type: 'bar', // 图表类型为柱状图 barWidth: '35%', // 柱子宽度 data: [200, 300, 300, 900, 1500, 1200, 600], // 数据数组 // 柱子样式配置 itemStyle: { barBorderRadius: 5 // 柱子圆角大小 } } ] ]; // 3. 使用刚指定的配置项和数据显示图表 myChart.setOption(option); // 4. 监听浏览器窗口大小变化事件，实现图表的自适应大小 window.addEventListener("resize", function () { myChart.resize(); }); })(); //柱状图2 // 立即执行函数，用于封装第二个柱状图的配置和初始化 (function () { // 声明颜色数组，用于定义柱状图的颜色 var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; // 实例化 ECharts 对象并绑定到指定的 DOM 元素 var myChart = echarts.init(document.querySelector(".bar2 .chart")); // 定义柱状图的配置项 var option = { // 网格组件配置 grid: { top: "10%", // 顶部距 left: "22%", // 左边距 bottom: "10%", // 底部距 containLabel: true // 网格是否包含坐标轴的标签 }, // X 轴配置，不显示 X 轴 xAxis: { show: false // 不显示 X 轴 }, // Y 轴配置，包含两个 Y 轴，一个用于显示类目，一个用于显示数值 yAxis: [ { axisLine: { show: false // 不显示 Y 轴轴线 }, axisTick: { show: false // 不显示 Y 轴刻度 }, axisLabel: { color: "#fff" // Y 轴标签颜色 }, type: 'category', // 类型为类目轴 inverse: true, // 反转坐标轴 data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"] // 类目数据 }, { show: true, // 显示 Y 轴 data: [702, 350, 610, 793, 664], // 数值数据 inverse: true, // 反转坐标轴 axisLabel: { // Y 轴标签的样式配置 textStyle: { fontSize: 12, // 标签字体大小 color: "#fff" // 标签颜色 } } } ], // 系列配置，包含两个系列，一个为柱状图，一个为边框 series: [ { name: '条', // 系列名称 type: 'bar', // 图表类型为柱状图 data: [70, 34, 60, 78, 69], // 数据数组 yAxisIndex: 0, // 使用第一个 Y 轴 barCategoryGap: 50, // 柱子类目间隔 barWidth: 10, // 柱子宽度 itemStyle: { // 柱子样式配置 normal: { barBorderRadius: 20, // 柱子圆角大小 color: function (params) { // 柱子颜色动态绑定 return myColor[params.dataIndex]; } } }, label: { // 图形上的文本标签 normal: { show: true, // 显示标签 position: "inside", // 标签显示在柱子内部 formatter: "{c}%" // 标签显示格式 } } }, { name: "框", // 系列名称 type: "bar", // 图表类型为柱状图 barCategoryGap: 50, // 柱子类目间隔 barWidth: 15, // 柱子宽度 itemStyle: { // 边框样式配置 color: "none", // 柱子颜色设置为透明 borderColor: "#00c1de", // 边框颜色 borderWidth: 3, // 边框宽度 barBorderRadius: 15 // 边框圆角大小 }, yAxisIndex: 1, // 使用第二个 Y 轴 data: [100, 100, 100, 100, 100] // 数据数组，这里为固定值 } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); // 监听浏览器窗口大小变化事件，实现图表的自适应大小 window.addEventListener("resize", function () { myChart.resize(); }); })();