若依分离版-前端使用echarts组件

select * from sm_shipment_daily where DATE_FORMAT(shipment_date,'%Y-%m')='2024-08'

option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
},
series: [
{
name: '当日',
type: 'pie',
selectedMode: 'single',
radius: ['0%', '40%'],
label: {
position: 'inner',
fontSize: 14,
formatter: '{b}\n{c}' // 标签文本格式器，此处 {b} 表示数据名，{c} 表示数据值，{d} 表示百分比
},
labelLine: {
show: false
},
data: [
{ value: 1548, name: '天计划' },
{ value: 775, name: '天实际' }
]
},
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
labelLine: {
length: 30
},
label: {
formatter: '{b}:{c}',
borderWidth: 1,
borderRadius: 4,
textStyle:{
color:"#ffffff",
fontSize:'1.2em'
}
},
data: [
{ value: 1048, name: '月计划' },
{ value: 335, name: '月实际' }
]
}
]
};
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
},
series: [
{
name: '当日',
type: 'pie',
selectedMode: 'single',
radius: ['0%', '40%'],
label: {
position: 'inner',
fontSize: 14,
formatter: '{b}\n{c}' // 标签文本格式器，此处 {b} 表示数据名，{c} 表示数据值，{d} 表示百分比
},
labelLine: {
show: false
},
data: [
{ value: 1548, name: '天计划' },
{ value: 775, name: '天实际' }
]
},
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
labelLine: {
length: 30
},
label: {
formatter: '{b}:{c}',
borderWidth: 1,
borderRadius: 4,
textStyle:{
color:"#ffffff",
fontSize:'1.2em'
}
},
data: [
{ value: 1048, name: '月计划' },
{ value: 335, name: '月实际' }
]
}
]
};

1 npm list:显示已安装的模块

该命令用于列出当前项目的所有依赖关系，包括直接依赖和间接依赖。执行 npm list 时，npm 将从当前目录开始，递归地列出所有已安装的模块及其版本信息

npm list

2 npm outdated:用于检查当前项目中的npm包是否有新的版本可用

npm outdated是一个npm命令，用于检查当前项目中的npm包是否有新的版本可用。运行npm outdated命令会列出当前项目中已安装的包的版本信息，并显示出最新的可用版本。如果某个包的当前版本已经过时，npm outdated会在版本信息中用红色标记出来，提醒开发者更新该包。这个命令可以帮助开发者及时了解项目中的包是否需要更新，以便保持项目的安全性和稳定性。

npm outdated

3 npm view: 此命令显示有关包的数据并将其打印到标准输出。

根据后面跟有包名，显示详细的信息

npm view echarts

4 Package.json:文件来查看已安装的模块。这些方法可以帮助我们了解项目中使用的模块及其版本.

前面的工作总结了，有关查看模块的安装信息和更新的信息。

5 安装echarts组件，安装命令如下：npm install echarts vue-echarts --force -save
注：vue,echarts,vue-echarts的版本问题，版本错误，也不能运行起来啊，

基于vue2版本使用的echarts、vue-echarts依赖包版本：
“vue”: “^2.6.11”,
“echarts”: “^4.9.0”,
“vue-echarts”: “^5.0.0-beta.0”

基于vue3版本使用的echarts、vue-echarts依赖包版本：
“echarts”: “^5.2.2”,
“vue”: “^3.2.16”,
“vue-echarts”: “^6.0.0”

npm install echarts@4.9.0 vue-echarts@5.0.0-beta.0 --force -save

6 安装 composition-api，命令如下：

注：Vue 2 下使用 vue-echarts，必须还要安装 @vue/composition-api ：

npm i -D @vue/composition-api

7 main.js中全局注册组件
import 'echarts'
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)
可使得如下命令来查看echarts的使用情况

import ECharts from 'vue-echarts'

console.log(ECharts)

8 基本使用
注：如下代码所示，v-chart标签的名称，要和main.js中Vue.component('v-chart', ECharts)注册的名称一致，都要为v-chart

v-chart的属性值options,不是option,注意这个坑！

<template>
<v-chart :options="option_column" style="height: 400px"></v-chart>
</template>

<script>
export default {
data() {
return {
option_column: {
title: { text: "Column Chart" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
},
};
},
};
</script>