0
0

在 Visual Studio Code 中创建 Vue 工程使用 Echarts 代码实现可视化

一、下载安装Node.js

（1）Node.js官方安装包及源码下载地址：Node.js — Run JavaScript Everywhere

（2）检测是否安装成功：win+R，输入“cmd”，打开，输入“node --version”检查Node.js版本

（3）Node.js安装完毕，会自动在系统的path环境变量中配置，无法在终端查看，重启电脑重新加载就可以了。也可以删掉自动配置的，手动再加上即可。如：打开计算机属性-高级系统设置-环境变量，在系统变量列表中找到path变量

二、安装vue脚手架

【win+R，输入“cmd”，打开，复制粘贴】

**（1）切换淘宝镜像：npm config set registry https://registry.npmmirror.com **

（2）安装vue脚手架：npm install -g @vue/cli

三、下载安装Visual Studio Code

（1）Visual Studio Code 官方安装包及源码下载地址：Visual Studio Code - Code Editing. Redefined

（2）快捷键Ctrl + Shift + X，左侧上方输入Chinese，安装中文包

bcccf7b1d6964d0f8ec8eba2ddc6d019.png

四、创建文件夹方便代码存放

（1）找到Visual Studio Code的安装目录，进入创建文件夹（不要用中文），我这里为vue_stud

0588f42bdb614f8e910e29045be01712.png

0d44c0c2fee646e3a8c987ed7ef41786.png

五、进入Visual Studio Code 创建vue项目

（1）新建终端

32ade44dcd564425a0a44d91ee7f334d.png

（2）cd进入之前创建的文件夹里面vue_study，点击新建终端也可能直接进入这个路径

0e35298e704b4cb39e0c4c28b79d0b2a.png

（3）创建项目：vue create vue_project 这里的（vue_project）为项目名称，回车

4e552b12217548b29fa24232f3948f74.png

（4）选择安装版本，我这里选择的自义定配置（Manually select features），相比直接配置vue3和vue2，可以节省后续的一些配置，键盘上下方向键选择，回车

5662f2e3c4ae46b0a548264b7a112e68.png

（5）按空格键选择要安装的配置资源，（）中带“*”说明选中，未选完前千万不要按回车，不小心按了回车可以退出重来。下面是我用到的一些配置资源选择，回车

d43c3a8aa5034bad810e57be22c89ec4.png

（6）选择版本，我这里用的是2.x，键盘上下方向键选择，回车

a1d3ec0b300444f5a68db75aa75fb031.png

（7）Use history mode for router? (Requires proper server setup for index fallback in production)，是否为路由使用历史模式？（在生产环境中需要正确设置服务器以实现索引回退），我这里选择的是n

34a945124c9b4dde8cc3d107095d196f.png

（8）请选择Css预处理语言 键盘上下方向键选择Less，回车 (选择Less主要为css解决浏览器兼容,简化css代码等问题)

412938d008284b138a29a79c3b0bf5c8.png

（9）如何存放配置，键盘上下方向键选择In package.json，回车

b35cbaab67ea4f88a73b2b9d0ba673bd.png

（10）是否保存本地配置（这里选择yes会保存一个模版，以后创建项目可以直接选择，但是刚学习应该多练手，不建议保存），所以我选择的是n

756337ea267140dfb9f9cebd273b26e8.png

**（11）等待安装配置即可，自义定配置的过程相比会比较慢 **

899fe0686e4e4688babbf9327a3870ef.png

（12）搭建完毕，输入所给命令进入项目：cd vue_project 启动项目：npm run serve 按住Ctrl点击Local后面的http://localhost:8080/**进行访问**

eedf4ee8bdb74477b1b5e1192297fc61.png

8f676488c92b4be489e08143894c5e2c.png

1d7e976c3fe24ef6ba76b0e854f85535.png

六、vue引入echarts

在终端输入npm install echarts

30787ef7692f495aaeb999f7ae35cc80.png

七、vue引入Axios

（1）新建终端，进入刚才创建的项目cd vue_project

109407e6d04142838b61062c7263d573.png

（2）命令安装axios和vue-axios

npm install axios

cdbd9c7cae6f43cbbb77241c903d0237.png

npm install vue-axios

c138893d618f48149af11b236a72f390.png

（3）之后在main.js里面完整引入

3c45a5ecd49b426b838c85c342a27e26.png

import axios from 'axios'

import VueAxios from 'vue-axios'

// VueAxi0s 与 axios 的位置不能交换

//否则出现 TypeError:Cannot read property 'protocol' of undefined

Vue.use(VueAxios,axios)

fb87cec1dc3c4176b1e9bd18e03b207d.png

八、修改vue.config.js文件

3b8926b08633435f8009472c8eb0b7eb.png

module.exports = {

** devServer: {**

** port: 9000, // 端口号的配置**

** open: true, // 自动打开浏览器**

** proxy: {**

** '/api': {**

** target: 'http://192.168.45.10:8999/', // 目标 API 地址**

** changeOrigin: true, // 允许跨域**

** pathRewrite: {**

** '^/api': '' // 重写路径**

** }**

** }**

** }**

** }**

}

c1e7f73784d34a2d8083390165d4053c.png

九、删除无关内容

（1）项目vue_project下的App.vue

嫌美观可以删掉这里面的内容，之后会在这引入自定的组件按钮，也可以直接注释，当一个模板使用

0aa0038329284707a2f69042e2570f7f.png

（2）项目vue_project下的子文件夹views，直接删除这俩个vue项目，

jsconfig.json文件会警告，重新保存即可

4eb64c41c5b443c48907b3dbd8906d0b.png

（3）项目vue_project下的子文件夹router里的index.js文件

嫌美观的可以删掉这里面的内容，之后会在这引入自定的组件，也可以不用删除，当一个模板使用

28ad2b7de87648809d0b5a28b6bfc8e2.png

十、新建子组件

5a633a4c8da041cb9f6edf48362b38d8.png

我这里建了bar_study.vue 和 pie_study.vue

9c14cd1fec0141ef9b4808de3804d4c7.png

十一、引入子组件

项目vue_project下的子文件夹router里的index.js文件

import bar_study from '../views/bar_study.vue'

import pie_study from '../views/pie_study.vue'

======================================

{

  1. path: '/echatr_bar',
  3. name: 'bar',
  5. component: bar_study,

},

{

  1. path: '/echart_pie',
  3. name: 'pie',
  5. component: pie_study,

},

======================================

6982457217544faa97b44e2e08b1b671.png

十二、在父组件中调用子组件

  1. <nav>
  3.  ♡ <router-link to="/echatr_bar">服务器柱状图</router-link> ♡
  5.   <router-link to="/echatr_pie">服务器饼图</router-link> ♡
  7. </nav>
  9. <router-view/>

1682d6fe6b8a428e8bf6bbf0825dbb54.png

十三、在子组件中编写echarts代码获取服务器数据

基本格式

<template> </template> <script> </script> <style> </style>

终端启动

fd548b49a26446fab7e9fc66ad5cb72b.png

任务一：用柱状图展示消费额最高的省份

编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

代码如下，注意调用部分已经使用特殊格式标注：

<template> 
  1. <div id="echart_bar"></div>
</template> <script> import * as echarts from 'echarts'; import axios from 'axios'; export default { name: 'bar', data() { return { // 存储 echarts 实例 myEcharts: {} }; }, mounted() { // 请求数据 axios({ url: "/api/dataVisualization/selectOrderInfo", method: 'post', data: { "startTime": "2020-01-01 00:00:00", "endTime": "2020-12-31 23:59:59" } }).then(({ data }) => { // 对获取到的接口数据进行省份名字分组聚合处理，并排序过滤出最大的7个省份 var a = data.data.reduce((acc, r) => {// 使用数组的reduce方法对data.data进行迭代处理,在回调函数中，acc代表累加器，初始为一个空数组，随着迭代逐渐积累处理后的结果；r代表当前正在处理的数组元素，即接口数据中的每一个对象。 // 检查是否已存在当前省份的聚合数据 var flag = acc.find(item => item.provinceName === r.provinceName);// 使用数组的find方法在累加器acc中查找是否有省份名称与当前处理对象r的省份名称相同的元素 if (!flag) { // 如果不存在相同省份名称的元素，将当前对象的省份名称和对应的金额作为一个新的对象添加到累加器acc中 acc.push({ provinceName: r.provinceName, value: r.finalTotalAmount }); } else { // 如果存在相同省份名称的元素，将当前对象的金额累加到已有的省份对应的金额上 flag.value += r.finalTotalAmount; } return acc; }, []).sort((a, b) => b.value - a.value).slice(0, 7);// 对处理后的累加器数组进行排序，按照每个对象的value属性（金额）从大到小排序。slice(0, 7)取排序后的前 7 个元素。 // 打印出最终处理得到的包含前 7 个省份聚合数据的数组 console.log(a); // 使用 echarts.init 初始化 echarts 实例 this.myEcharts = echarts.init(document.getElementById('echart_bar'), // 主题颜色大小 'pink', { height: 480, width: 900 }); // 设置 echarts 图表选项 this.myEcharts.setOption({ title: { text: '2020年消费额最高的5个省份', left: 'left', // 标题水平向左显示 top: 'top', // 标题置顶显示 //文字样式 textStyle: { color: 'purple' // 设置字体颜色为紫色 }, //标题边框 borderWidth: 1, // 标题边框数值 borderColor: 'red', // 标题边框颜色 borderRadius: 10 // 标题边框圆角 }, legend: {}, // 提示框 tooltip: {}, //toolbox工具----导出图片、数据视图、动态类型切换、数据区域缩放、重置 toolbox: { show: true, // 开启 feature: { saveAsImage: {}, // 导出图片 dataView: {}, // 数据视图 magicType: { // 动态类型切换 type: ['line', 'bar'] // 折线图》》》柱状图 }, dataZoom: {}, // 数据区域缩放 restore: {}, // 重置 } }, xAxis: { type: 'category', data: a.map(r => r.provinceName) }, yAxis: { type: 'value' }, series: [ { data: a.map(r => ({ value: [ r.provinceName, r.value ] })), type: 'bar', } ] }); }); } }; </script> <style> #echart_bar { width: 850px; height: 400px; } </style>

一键复制

  1. <template>
  2.     <div id="echart_bar"></div>
  3. </template>
  5. <script>
  6. import * as echarts from 'echarts';
  7. import axios from 'axios';
  8. export default {
  9.     name: 'bar',
  10.     data() {
  11.         return {
  12.             // 存储 echarts 实例
  13.             myEcharts: {}
  14.         };
  15.     },
  16.     mounted() {
  17.         // 请求数据
  18.         axios({
  19.             url: "/api/dataVisualization/selectOrderInfo",
  20.             method: 'post',
  21.             data: {
  22.                 "startTime": "2020-01-01 00:00:00",
  23.                 "endTime": "2020-12-31 23:59:59"
  24.             }
  25.         }).then(({ data }) => {
  26.             // 对获取到的接口数据进行省份名字分组聚合处理，并排序过滤出最大的7个省份
  27.             var a = data.data.reduce((acc, r) => {// 使用数组的reduce方法对data.data进行迭代处理,在回调函数中，acc代表累加器，初始为一个空数组，随着迭代逐渐积累处理后的结果；r代表当前正在处理的数组元素，即接口数据中的每一个对象。
  28.                 // 检查是否已存在当前省份的聚合数据
  29.                 var flag = acc.find(item => item.provinceName === r.provinceName);// 使用数组的find方法在累加器acc中查找是否有省份名称与当前处理对象r的省份名称相同的元素
  30.                 if (!flag) {
  31.                     // 如果不存在相同省份名称的元素，将当前对象的省份名称和对应的金额作为一个新的对象添加到累加器acc中
  32.                     acc.push({ provinceName: r.provinceName, value: r.finalTotalAmount });
  33.                 } else {
  34.                     // 如果存在相同省份名称的元素，将当前对象的金额累加到已有的省份对应的金额上
  35.                     flag.value += r.finalTotalAmount;
  36.                 }
  37.                 return acc;
  38.             }, []).sort((a, b) => b.value - a.value).slice(0, 7);// 对处理后的累加器数组进行排序，按照每个对象的value属性（金额）从大到小排序。slice(0, 7)取排序后的前 7 个元素。
  39.             // 打印出最终处理得到的包含前 7 个省份聚合数据的数组
  40.             console.log(a);
  41.             // 使用 echarts.init 初始化 echarts 实例
  42.             this.myEcharts = echarts.init(document.getElementById('echart_bar'),
  43.                 // 主题颜色大小
  44.                 'pink', {
  45.                 height: 480,
  46.                 width: 900
  47.             });
  48.             // 设置 echarts 图表选项
  49.             this.myEcharts.setOption({
  50.                 title: {
  51.                     text: '2020年消费额最高的5个省份',
  52.                     left: 'left', // 标题水平向左显示
  53.                     top: 'top',  // 标题置顶显示
  54.                     //文字样式
  55.                     textStyle: {
  56.                         color: 'purple' // 设置字体颜色为紫色
  57.                     },
  58.                     //标题边框
  59.                     borderWidth: 1, // 标题边框数值
  60.                     borderColor: 'red', // 标题边框颜色
  61.                     borderRadius: 10 // 标题边框圆角
  62.                 },
  63.                 legend: {},
  64.                 // 提示框
  65.                 tooltip: {},
  66.                 //toolbox工具----导出图片、数据视图、动态类型切换、数据区域缩放、重置
  67.                 toolbox: {
  68.                     show: true, // 开启
  69.                     feature: {
  70.                         saveAsImage: {}, // 导出图片
  71.                         dataView: {}, // 数据视图
  72.                         magicType: { // 动态类型切换
  73.                             type: ['line', 'bar'] // 折线图》》》柱状图
  74.                         },
  75.                         dataZoom: {}, // 数据区域缩放
  76.                         restore: {}, // 重置
  77.                     }
  78.                 },
  79.                 xAxis: {
  80.                     type: 'category',
  81.                     data: a.map(r => r.provinceName)
  82.                 },
  83.                 yAxis: {
  84.                     type: 'value'
  85.                 },
  86.                 series: [
  87.                     {
  88.                         data: a.map(r => ({
  89.                             value: [
  90.                                 r.provinceName,
  91.                                 r.value
  92.                             ]
  93.                         })),
  94.                         type: 'bar',
  95.                     }
  96.                 ]
  97.             });
  98.         });
  99.     }
  100. };
  101. </script>
  103. <style>
  104. #echart_bar {
  105.     width: 850px;
  106.     height: 400px;
  107. }
  108. </style>

b08fcd21bfc84515b3d9d4ca2170bca8.png

任务二：用饼状图展示各地区消费能力

编写Vue工程代码，根据接口，用饼状图展示2020年各地区的消费总额占比，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

代码如下，注意调用部分已经使用特殊格式标注：

<template> 
  1. <div id="app">
  3.     <!-- 用于容纳图表的容器 -->
  5.     <div id="echart_pie"></div>
  7.     <!-- 添加一个用于显示数据的 div
  9.     <div v-if="dataForChart.length > 0">数据：{{ dataForChart }}</div> -->
  11. </div>
</template> <script> import axios from 'axios'; import * as echarts from 'echarts'; export default { name: 'App', data() { return { // 存储 Echarts 图表实例 chartInstance: null, // 存储用于图表展示的数据 dataForChart: [] }; }, mounted() { axios({ url: 'api/dataVisualization/selectOrderInfo', method: 'post', data: { startTime: '2020-01-01 00:00:00', endTime: '2020-12-31 23:59:59' } }).then(({ data }) => { // 对获取到的数据进行地区消费总额的聚合处理 let regionData = data.data.reduce((acc, r) => { // 获取数据中的地区名称 let region = r.regionName; // 获取数据中的总金额 let amount = r.finalTotalAmount; // 在累加器中查找是否有当前地区的数据 let existingRegion = acc.find(item => item.region === region); if (!existingRegion) { // 如果不存在，添加新的地区数据 acc.push({ region, amount }); } else { // 如果存在，累加消费金额 existingRegion.amount += amount; } return acc; }, []); // 将处理后的数据存储起来 this.dataForChart = regionData; console.log(this.dataForChart); // 初始化图表 this.initChart(); }); }, methods: { initChart() { var chartDom = document.getElementById('echart_pie'); this.chartInstance = echarts.init(chartDom); var totalAmount = this.dataForChart.reduce((acc, item) => acc + item.amount, 0); var option = { title: { text: '2020 年各地区消费总额占比', left: 'center', // 标题水平向左显示 top: 'top', // 标题置顶显示 //文字样式 textStyle: { color: 'purple' // 设置字体颜色为紫色 }, //标题边框 borderWidth: 1, // 标题边框数值 borderColor: 'red', // 标题边框颜色 borderRadius: 10 // 标题边框圆角 }, legend: { show: true, // 开启图例显示 orient: 'vertical', // 图例以垂直方向排列 如果设置为 'horizontal'，则图例会以水平方向排列 left: 'right' // 将图例放置在图表的右侧 'left'（左侧）、'top'（顶部）、'bottom'（底部） }, // 提示框 tooltip: { formatter: (params) => { const region = params.name; const amount = params.value; const percent = ((amount / totalAmount) * 100).toFixed(2) + '%'; return `【${region}】消费： ${amount} / 占： ${percent}`; } }, series: [ { name: '消费占比', type: 'pie', data: this.dataForChart.map(item => ({ name: item.region, value: item.amount, percent: ((item.amount / totalAmount) * 100).toFixed(2) + '%' })) } ] }; this.chartInstance.setOption(option); } } }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #echart_pie { width: 600px; height: 400px; } </style>

一键复制

  1. <template>
  2.     <div id="app">
  3.         <!-- 用于容纳图表的容器 -->
  4.         <div id="echart_pie"></div>
  5.         <!-- 添加一个用于显示数据的 div
  6.         <div v-if="dataForChart.length > 0">数据：{{ dataForChart }}</div> -->
  7.     </div>
  8. </template>
  10. <script>
  11. import axios from 'axios';
  12. import * as echarts from 'echarts';
  14. export default {
  15.     name: 'App',
  16.     data() {
  17.         return {
  18.             // 存储 Echarts 图表实例
  19.             chartInstance: null,
  20.             // 存储用于图表展示的数据
  21.             dataForChart: []
  22.         };
  23.     },
  24.     mounted() {
  25.         axios({
  26.             url: 'api/dataVisualization/selectOrderInfo',
  27.             method: 'post',
  28.             data: {
  29.                 startTime: '2020-01-01 00:00:00',
  30.                 endTime: '2020-12-31 23:59:59'
  31.             }
  32.         }).then(({ data }) => {
  33.             // 对获取到的数据进行地区消费总额的聚合处理
  34.             let regionData = data.data.reduce((acc, r) => {
  35.                 // 获取数据中的地区名称
  36.                 let region = r.regionName;
  37.                 // 获取数据中的总金额
  38.                 let amount = r.finalTotalAmount;
  39.                 // 在累加器中查找是否有当前地区的数据
  40.                 let existingRegion = acc.find(item => item.region === region);
  41.                 if (!existingRegion) {
  42.                     // 如果不存在，添加新的地区数据
  43.                     acc.push({ region, amount });
  44.                 } else {
  45.                     // 如果存在，累加消费金额
  46.                     existingRegion.amount += amount;
  47.                 }
  48.                 return acc;
  49.             }, []);
  50.             // 将处理后的数据存储起来
  51.             this.dataForChart = regionData;
  52.             console.log(this.dataForChart);
  53.             // 初始化图表
  54.             this.initChart();
  55.         });
  56.     },
  57.     methods: {
  58.         initChart() {
  59.             var chartDom = document.getElementById('echart_pie');
  60.             this.chartInstance = echarts.init(chartDom);
  61.             var totalAmount = this.dataForChart.reduce((acc, item) => acc + item.amount, 0);
  62.             var option = {
  63.                 title: {
  64.                     text: '2020 年各地区消费总额占比',
  65.                     left: 'center', // 标题水平向左显示
  66.                     top: 'top',  // 标题置顶显示
  67.                     //文字样式
  68.                     textStyle: {
  69.                         color: 'purple' // 设置字体颜色为紫色
  70.                     },
  71.                     //标题边框
  72.                     borderWidth: 1, // 标题边框数值
  73.                     borderColor: 'red', // 标题边框颜色
  74.                     borderRadius: 10 // 标题边框圆角
  75.                 },
  76.                 legend: {
  77.                     show: true, // 开启图例显示
  78.                     orient: 'vertical', // 图例以垂直方向排列 如果设置为 'horizontal'，则图例会以水平方向排列
  79.                     left: 'right' // 将图例放置在图表的右侧 'left'（左侧）、'top'（顶部）、'bottom'（底部）
  80.                 },
  81.                 // 提示框
  82.                 tooltip: {
  83.                     formatter: (params) => {
  84.                         const region = params.name;
  85.                         const amount = params.value;
  86.                         const percent = ((amount / totalAmount) * 100).toFixed(2) + '%';
  87.                         return `【${region}】消费： ${amount} / 占： ${percent}`;
  88.                     }
  89.                 },
  90.                 series: [
  91.                     {
  92.                         name: '消费占比',
  93.                         type: 'pie',
  94.                         data: this.dataForChart.map(item => ({
  95.                             name: item.region,
  96.                             value: item.amount,
  97.                             percent: ((item.amount / totalAmount) * 100).toFixed(2) + '%'
  98.                         }))
  99.                     }
  100.                 ]
  101.             };
  102.             this.chartInstance.setOption(option);
  103.         }
  104.     }
  105. };
  106. </script>
  108. <style>
  109. #app {
  110.     font-family: Avenir, Helvetica, Arial, sans-serif;
  111.     -webkit-font-smoothing: antialiased;
  112.     -moz-osx-font-smoothing: grayscale;
  113.     text-align: center;
  114.     color: #2c3e50;
  115. }
  117. #echart_pie {
  118.     width: 600px;
  119.     height: 400px;
  120. }
  121. </style>

fd15bef9475247dc8e48ef3b9b7f4c9a.png

接口文档

  • 获取时间区间内的订单数据：

http****请求方式：POST 

  1. **请求地址：**
  1. http://192.168.45.10（标红的地址为可视化接口虚拟机的直连IP）:8999/dataVisualization/selectOrderInfo

请求参数：

字段

说明

类型

是否必填

startTime

开始时间

String

是

endTime

结束时间

String

是

请求格式：json示例如下

{

  1. "startTime":"2020-01-01 00:00:00",
  3. "endTime":"2020-12-30 00:00:00"

}

返回参数说明：

** **id : 主键

  1.     finalTotalAmount ：总金额

** **outTradeNo ：订单交易编号（第三方支付用)

  1.     provinceName ：省名称
  3.   regionName ：地区名称
  5.   userName : 用户名

请求成功返回JSON数据包：

20230724024159.png?origin_url=file%3A%2F%2F%2FC%3A%2FUsers%2Fhuang%2FAppData%2FLocal%2FTemp%2Fmsohtmlclip1%2F01%2Fclip_image072.gif&pos_id=YTfToczc

{

  1. "msg": "操作成功",
  3. "code": 200,
  5. "data": [
  7.     {
  9.         "id": 78506,
  11.         "finalTotalAmount": 305062.00,
  13.         "outTradeNo": "756847726439369",
  15.         "provinceName": "北京",
  17.         "regionName": "华北",
  19.         "userName": "华馥"
  21.     },
  23.     {
  25.         "id": 78559,
  27.         "finalTotalAmount": 6111.00,
  29.         "outTradeNo": "341957455961748",
  31.         "provinceName": "北京",
  33.         "regionName": "华北",
  35.         "userName": "罗菊兰"
  37.     },
  39.     {
  41.         "id": 78568,
  43.         "finalTotalAmount": 84610.00,
  45.         "outTradeNo": "489992944636772",
  47.         "provinceName": "北京",
  49.         "regionName": "华北",
  51.         "userName": "毛岚"
  53.     },
  55.     …
  57. ]

}

20230724024159.png?origin_url=file%3A%2F%2F%2FC%3A%2FUsers%2Fhuang%2FAppData%2FLocal%2FTemp%2Fmsohtmlclip1%2F01%2Fclip_image072.gif&pos_id=WBXjFiLr

  • 查询每年上架的商品

http****请求方式：POST 

  1. **请求地址：**
  1. http://192.168.45.10（标红的地址为可视化接口虚拟机的直连IP）:8999/dataVisualization/selectGoodsInfo

请求参数（无具体参数）：{}，格式为json

返回参数说明：

** **id : 编号

  1.     price ：总金额

** **skuName ：商品名称

  1.   year ：年份

请求成功返回JSON数据包：

{

  1. "msg": "操作成功",
  3. "code": 200,
  5. "data": [
  7.             {
  9.         "id": 1,
  11.         "price": 2220,
  13.         "skuName": "荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机 双卡双待",
  15.         "year": "2019"
  17.     },
  19.     {
  21.         "id": 2,
  23.         "price": 3321,
  25.         "skuName": "TCL 55A950C 55英寸32核人工智能 HDR曲面超薄4K电视金属机身（枪色）",
  27.         "year": "2019"
  29.     },
  31.     {
  33.         "id": 3,
  35.         "price": 3100,
  37.         "skuName": "小米（MI）电视 55英寸曲面4K智能WiFi网络液晶电视机4S L55M5-AQ 小米电视4S 55英寸 曲面",
  39.         "year": "2019"
  41.     },
  43.     ...
  45.      ]

}

Echarts练习代码

柱状图

  1. <template>
  2.   <div id="echart_bar">条形图</div>
  3. </template>
  5. <script>
  6. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  7. import * as echarts from 'echarts';
  8. // 按需引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  9. // import * as echarts from 'echarts/core';
  10. // // 引入柱状图图表，图表后缀都为 Chart
  11. // import { BarChart } from 'echarts/charts';
  12. // // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  13. // import {
  14. //   TitleComponent,
  15. //   TooltipComponent,
  16. //   GridComponent,
  17. //   DatasetComponent,
  18. //   TransformComponent,
  19. //   DataZoomComponent
  20. // } from 'echarts/components';
  21. // // 标签自动布局、全局过渡动画等特性
  22. // import { LabelLayout, UniversalTransition } from 'echarts/features';
  23. // // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  24. // import { CanvasRenderer } from 'echarts/renderers';
  25. export default {
  26.   // created() {
  27.   //   // 注册必须的组件
  28.   //   echarts.use([
  29.   //     TitleComponent,
  30.   //     TooltipComponent,
  31.   //     GridComponent,
  32.   //     DatasetComponent,
  33.   //     TransformComponent,
  34.   //     BarChart,
  35.   //     LabelLayout,
  36.   //     UniversalTransition,
  37.   //     CanvasRenderer
  38.   //   ]);
  39.   // },
  40.   mounted() {
  41.     // 初始化图表，设置配置项
  42.     var myChart = echarts.init(document.getElementById('echart_bar'));
  43.     var xdata = ['星期一', '星期二', '星期三', '星期三', '星期五', '星期六', '星期天'];
  44.     var ydata = [912, 680, 568, 792, 699, 872, 563];
  45.     var ydata01 = [832, 729, 654, 699, 750, 799, 612];
  46.     let option = {
  47.       // 标题
  48.       title: {
  49.         text: '张佐天一周看妹子的数量', // 标题名称
  50.         left: 'left', // 标题水平向左显示
  51.         top: 'top',  // 标题置顶显示
  52.         //文字样式
  53.         textStyle: {
  54.           color: 'purple' // 设置字体颜色为紫色
  55.         },
  56.         //标题边框
  57.         borderWidth: 1, // 标题边框数值
  58.         borderColor: 'red', // 标题边框颜色
  59.         borderRadius: 10 // 标题边框圆角
  60.       },
  61.       //提示框
  62.       tooltip: {
  63.         show: true, // 开启提示框
  64.         //trigger: 'axis', // 触发类型为 axis 即在坐标轴触发（默认）       
  65.         trigger: 'item', //  触发类型为 item 在柱状上显示数据       
  66.         //触发类型
  67.         //triggerOn:'mouseover',//移动显示数据
  68.         //triggerOn:'click',//点击显示数据
  69.         //数据显示格式
  70.         //formatter: '{b} : “张佐天”看了 {c} 条抖音妹子'  //【折线图、柱状图、K线图】分别表示  a系列名、b类目名、c数值
  71.         formatter: (params) => {
  72.           if (params.seriesName === '抖音数量') {
  73.             return `${params.name} : “张佐天”看了 ${params.value} 条抖音妹子`;
  74.           } else if (params.seriesName === '快手数量') {
  75.             return `${params.name} : “张佐天”看了 ${params.value} 条快手妹子`;
  76.           }
  77.         }
  78.         // 在 tooltip 的配置中，formatter 接收一个参数 params
  79.         // 这个参数包含了与当前触发提示框的数据点相关的信息，比如数据系列名称（seriesName）、数据项名称（name）和数据值（value）等
  80.         // 根据不同的数据系列名称，formatter 函数返回不同的格式化字符串，以在提示框中显示特定的信息
  81.       },
  82.       //toolbox工具----导出图片、数据视图、动态类型切换、数据区域缩放、重置
  83.       toolbox: {
  84.         show: true, // 开启
  85.         feature: {
  86.           saveAsImage: {}, // 导出图片
  87.           dataView: {}, // 数据视图
  88.           magicType: { // 动态类型切换
  89.             type: ['line', 'bar'] // 折线图》》》柱状图
  90.           },
  91.           dataZoom: {}, // 数据区域缩放
  92.           restore: {}, // 重置
  93.         }
  94.       },
  95.       legend: {
  96.         show: true, // 开启
  97.         data: ["抖音数量", "快手数量"], // 与 series 里面的 name 的值保持一致
  98.       },
  99.       // 直角坐标系
  100.       xAxis: {
  101.         type: 'category', // 类目轴
  102.         data: xdata
  103.       },
  104.       yAxis: {
  105.         type: 'value' // 数值轴
  106.       },
  107.       // 系列列表。每个 series 是一个数据集的配置项及绘制图表所用的属性。
  108.       series: [
  109.         {
  110.           name: '抖音数量',//系列名称
  111.           type: 'bar',//图表类型
  112.           data: ydata,
  113.           //最值
  114.           markPoint: {
  115.             data: [
  116.               { type: 'max', name: '最大值' }, // 最大值
  117.               { type: 'min', name: '最小值' } // 最小值
  118.             ]
  119.           },
  120.           // 平均值
  121.           markLine: {
  122.             data: [
  123.               { type: 'average', name: '平均值' } // 平均值
  124.             ]
  125.           },
  126.         },
  127.         {
  128.           name: '快手数量',//系列名称
  129.           type: 'bar',//图表类型
  130.           data: ydata01,
  131.           //最值
  132.           markPoint: {
  133.             data: [
  134.               { type: 'max', name: '最大值' }, // 最大值
  135.               { type: 'min', name: '最小值' } // 最小值
  136.             ]
  137.           },
  138.           // 平均值
  139.           markLine: {
  140.             data: [
  141.               { type: 'average', name: '平均值' } // 平均值
  142.             ]
  143.           },
  144.         }
  145.       ]
  146.     }
  147.     myChart.setOption(option);
  148.   }
  149. }
  150. </script>
  152. <style>
  153. #echart_bar {
  154.   width: 600px;
  155.   height: 400px;
  156.   margin: 40px auto;
  157. }
  158. </style>

5e9b19c56b02405eb1ca32e06b189234.png

折线图

  1. <template>
  2.   <div id="echart_line">折线图</div>
  3. </template>
  5. <script>
  6. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  7. import * as echarts from 'echarts';
  8. export default {
  9.   mounted() {
  10.     // 初始化图表，设置配置项
  11.     var myChart = echarts.init(document.getElementById('echart_line'));   
  12.     // 指定图表的配置项和数据
  13.     var x_data = ['星期一', '星期二', '星期三', '星期三', '星期五', '星期六', '星期天'];
  14.     var y_data_01 = [912, 680, 568, 792, 699, 872, 563];
  15.     var y_data_02 = [732, 629, 654, 599, 650, 699, 512];
  16.     let option = {
  17.       // 标题
  18.       title: {
  19.         text: '粟文宣一周看妹子的数量', // 标题名称
  20.         left: 'left', // 标题水平向左显示
  21.         top: 'top',  // 标题置顶显示
  22.         //文字样式
  23.         textStyle: {
  24.           color: 'purple' // 设置字体颜色为紫色
  25.         },
  26.         //标题边框
  27.         borderWidth: 1, // 标题边框数值
  28.         borderColor: 'red', // 标题边框颜色
  29.         borderRadius: 10 // 标题边框圆角
  30.       },
  31.       //提示框
  32.       tooltip: {
  33.         show: true, // 开启提示框
  34.         //trigger: 'axis', // 触发类型为 axis 即在坐标轴触发（默认）       
  35.         trigger: 'item', //  触发类型为 item 在柱状上显示数据       
  36.         //触发类型
  37.         //triggerOn:'mouseover',//移动显示数据
  38.         //triggerOn:'click',//点击显示数据
  39.         //数据显示格式
  40.         //formatter: '{b} : “张佐天”看了 {c} 条抖音妹子'  //【折线图、柱状图、K线图】分别表示  a系列名、b类目名、c数值
  41.         formatter: (params) => {
  42.           if (params.seriesName === '抖音数量') {
  43.             return `${params.name} : “粟文宣”看了 ${params.value} 条抖音妹子`;
  44.           } else if (params.seriesName === '快手数量') {
  45.             return `${params.name} : “粟文宣”看了 ${params.value} 条快手妹子`;
  46.           }
  47.         }
  48.         // 在 tooltip 的配置中，formatter 接收一个参数 params
  49.         // 这个参数包含了与当前触发提示框的数据点相关的信息，比如数据系列名称（seriesName）、数据项名称（name）和数据值（value）等
  50.         // 根据不同的数据系列名称，formatter 函数返回不同的格式化字符串，以在提示框中显示特定的信息
  51.       },
  52.       //toolbox工具----导出图片、数据视图、动态类型切换、数据区域缩放、重置
  53.       toolbox: {
  54.         show: true, // 开启
  55.         feature: {
  56.           saveAsImage: {}, // 导出图片
  57.           dataView: {}, // 数据视图
  58.           magicType: { // 动态类型切换
  59.             type: ['line', 'bar'] // 折线图》》》柱状图
  60.           },
  61.           dataZoom: {}, // 数据区域缩放
  62.           restore: {}, // 重置
  63.         }
  64.       },
  65.       legend: {
  66.         show: true, // 开启
  67.         data: ["抖音数量", "快手数量"], // 与 series 里面的 name 的值保持一致
  68.       },
  69.       // 直角坐标系
  70.       xAxis: {
  71.         type: 'category', // 类目轴
  72.         data: x_data,
  73.         //boundaryGap: false, // 紧挨边缘，默认值true
  74.       },
  75.       yAxis: {
  76.         type: 'value', // 数值轴
  77.         scale: true, // y 轴值不从 0 开始，从数据中 最小值 开始
  78.       },
  79.       // 系列列表。每个 series 是一个数据集的配置项及绘制图表所用的属性。
  80.       series: [
  81.         {
  82.           name: '抖音数量',//系列名称
  83.           type: 'line',//图表类型
  84.           data: y_data_01,         
  85.           //stack: "stack", // 堆叠图，俩数据中的 stack 值必须 相同
  86.           //areaStyle: {}, // 堆叠图,使效果更明显
  88.           // 最值
  89.           markPoint: {
  90.             data: [
  91.               { type: 'max', name: '最大值' }, // 最大值
  92.               { type: 'min', name: '最小值' } // 最小值
  93.             ]
  94.           },
  95.           // 平均值
  96.           markLine: {
  97.             data: [
  98.               { type: 'average', name: '平均值' } // 平均值
  99.             ]
  100.           },
  101.           // 标注区间
  102.           markArea: {
  103.             data: [
  104.               [
  105.                 {x_data:'星期一'}, //开始值
  106.                 {x_data:'星期二'}, //结束值
  107.               ],
  108.             ],
  109.           },
  110.           // 区域填充
  111.           areaStyle: {
  112.             type: 'default', // 区域填充样式
  113.             //color: 'red' // 区域填充颜色
  114.           },
  115.           // 线条样式
  116.           lineStyle: {
  117.             width: 3,// 线宽
  118.             color: 'red', // 线条颜色
  119.             type: 'dashed' //虚线  【dotted 点线】、【solid 实线】
  120.           },
  121.           // 点样式
  122.           symbolSize: 6, // 点的大小
  123.           symbol: 'circle', // 点的形状
  124.           smooth: true // 平滑曲线
  125.         },
  126.         {
  127.           name: '快手数量',//系列名称
  128.           type: 'line',//图表类型
  129.           data: y_data_02,        
  130.           //stack: "stack", // 堆叠图，俩数据中的 stack 值必须 相同
  131.           //areaStyle: {}, // 堆叠图,使效果更明显
  133.           // 最值
  134.           markPoint: {
  135.             data: [
  136.               { type: 'max', name: '最大值' }, // 最大值
  137.               { type: 'min', name: '最小值' } // 最小值
  138.             ]
  139.           },
  140.           // 平均值
  141.           markLine: {
  142.             data: [
  143.               { type: 'average', name: '平均值' } // 平均值
  144.             ]
  145.           },
  146.           // 区域填充
  147.           areaStyle: {
  148.             type: 'default' // 区域填充样式
  149.           }
  150.         }
  151.       ]
  152.     }
  153.     myChart.setOption(option);
  154.   }
  155. }
  156. </script>
  158. <style>
  159. #echart_line {
  160.   width: 600px;
  161.   height: 400px;
  162.   margin: 40px auto;
  163. }
  164. </style>

14dd792880304d77aa034af7706a6328.png

饼图

  1. <template>
  2.   <div id="echart_pie">饼图</div>
  3. </template>
  5. <script>
  6. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  7. import * as echarts from 'echarts';
  8. export default {
  9.   mounted() {
  10.     // 创建数据集
  11.     var myCharts = echarts.init(document.getElementById('echart_pie'));
  12.     var pieData = [
  13.       { value: 10, name: '星期一' },
  14.       { value: 9, name: '星期二' },
  15.       { value: 11, name: '星期三' },
  16.       { value: 9, name: '星期四' },
  17.       { value: 12, name: '星期五' },
  18.       { value: 8, name: '星期六' },
  19.       { value: 9, name: '星期天' }
  20.     ]
  21.     var option = {
  22.       title: {
  23.         text: '黄思勤一周的学习占比', // 标题名称
  24.         left: 'center', // 标题水平向左显示
  25.         top: 'top',  // 标题置顶显示
  26.         //文字样式
  27.         textStyle: {
  28.           fontSize: 25, // 字体大小
  29.           color: 'purple', // 字体颜色
  30.         },
  31.         //标题边框
  32.         borderWidth: 1, // 标题边框数值
  33.         borderColor: 'red', // 标题边框颜色
  34.         borderRadius: 10 // 标题边框圆角
  35.       },
  36.       tooltip: {
  37.         trigger: 'item' // 提示框的触发方式为当鼠标悬停在数据项（饼图的扇区）上时触发
  38.       },
  39.       legend: {
  40.         show: true, // 开启
  41.         orient: 'vertical', // 图例以垂直方向排列 如果设置为 'horizontal'，则图例会以水平方向排列
  42.         left: 'left' // 将图例放置在图表的左侧 'right'（右侧）、'top'（顶部）、'bottom'（底部）
  43.       },
  44.       series: [
  45.         {
  46.           emphasis: {
  47.             itemStyle: {
  48.               shadowBlur: 10, // 图形的阴影模糊度为 10
  49.               shadowOffsetX: 0, // 阴影在水平方向上的偏移量为 0
  50.               shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影的颜色为半透明的黑色。rgba表示颜色的红、绿、蓝和透明度值，这里黑色的 RGB 值为 (0, 0, 0)，透明度为 0.5，即半透明状态。
  51.             }
  52.           },
  53.           type: 'pie', // 图表类型
  54.           data: pieData,
  55.           // 饼图文字的显示
  56.           label: {
  57.             show: true, // 显示开启
  58.             //formatter: '{b} : {d}%' //文字显示的内容【饼图、仪表盘、漏斗图】表示 {a}(系列名称)，{b}(数据项名称)，{c}(数值)，{d}(百分比)
  59.             //formatter 的回调函数使用
  60.             formatter: function (params) {
  61.               return params.name + '：学习了【' + params.value + "】小时\n" + params.percent + '%'
  62.             }
  63.           },
  64.           //radius: '60%', // 饼图半径: 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
  65.           //radius: '60' ,// 饼图半径
  66.           radius: ['50%', '75%'], // 饼图半径：第1个元素代表的是內圆的半径 第2个元素外圆的半径
  67.           //roseType: 'radius', // 南丁格尔图 饼图每一个区域的半径不同
  68.           center: ['53%', '55%'], // 饼图的位置 左右 上下
  69.           //selectedMode:'single', // 选中效果 点击能够将选中的效果偏离 点击下一个回到原样
  70.           selectedMode: 'multiple', // 选中效果 点击能够将选中的效果偏离 点击下一个不会回到原样
  71.           selectedOffset: 30, // 选中效果 偏离的距离
  72.         }
  73.       ]
  74.     }
  75.     myCharts.setOption(option)
  76.   }
  77. }
  78. </script>
  80. <style>
  81. #echart_pie {
  82.   width: 850px;
  83.   height: 400px;
  84. }
  85. </style>

c358c0c5942b4c4697e59d18678ef761.png

标签： vscode vue.js echarts
本文转载自: https://blog.csdn.net/qq_73845968/article/details/143432537
版权归原作者 爱喝咖啡的喵. 所有， 如有侵权，请联系我们删除。
登录后发布评论

“在 Visual Studio Code 中创建 Vue 工程使用 Echarts 代码实现可视化”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。