文章目录
- （1）字体颜色
- （2）设置提示框组件
- （3）图例展示
- （4）平滑曲线
- （5）堆叠曲线图
- （6）堆叠面积填充
- （7）设置曲线宽度
- （8）隐藏所有数据点
- （9）高亮显示选中项
- （10）坐标轴两边留白策略
- （11）图像在容器中的位置
Vue 项目前、后端整合(图表二：产品月销曲线堆叠图)
Vue 项目后端接口框架搭建中，我们已经配置好了图表二中的数据，这里直接调用接口就行了。
一、配置图表二
1、基本结构搭建
在vue/app目录下的components文件夹下的 itemTwo.vue中,设置图表2，初始化echarts:
<template>
<div>
<h2>产品月销</h2>
<div class="chart" id="chartTwo">
<!-- 图表容器 -->
</div>
</div>
</template>
<script>import { inject, reactive, onMounted } from "vue";
export default {
setup() {
// 获取echarts对象
var $echarts = inject("echarts");
// 钩子
onMounted(() => {
// 初始化echarts
var myChart = $echarts.init(document.getElementById("chartTwo"));
// 配置项
var option = null;
option = {};
// 封装
myChart.setOption(option);
});
return {};
},
};</script>
<style>
</style>
返回顶部
2、Axios 请求数据
接下来我们需要图表展示的数据(后台 server 提供)，我们需要在组件内容请求数据，就需要引入 axios组件，并通过axios获取数据：
<template>
<div>
<h2>产品月销</h2>
<div class="chart" id="chartTwo">
<!-- 图表容器 -->
</div>
</div>
</template>
<script>import { inject, reactive, onMounted } from "vue";
export default {
setup() {
// 获取echarts对象
var $echarts = inject("echarts");
// 获取axios
var $axios = inject("axios");
// 获取数据
var dataTwo = reactive({});
// 自定义函数获取数据
async function getData(){
dataTwo = await $axios({url:'/two/data'});
// 控制台输出
console.log("dataTwo:",dataTwo);
}
// 钩子
onMounted(() => {
// 初始化echarts
var myChart = $echarts.init(document.getElementById("chartTwo"));
// 调用函数获取数据
getData();
// 配置项
var option = null;
option = {};
// 封装
myChart.setOption(option);
});
return {getData,dataTwo};
},
};</script>
<style>
</style>
配置完成后，记得运行 server，然后运行 app，在页面控制台中查看打印的数据：
通过数据的格式我们可以在 dataTwo.data.chartData.chartData 中获取的所需要得到数据。所以我们创建变量 realdata 对其进行封装获取，并且为了使数据更容易进行配置，我们需要进行更细致的划分获取，后面配置参数的时候可以直接使用：
返回顶部
3、图表获取数据配置
注意在图标配置的时候，我们需要满足折线图数据的配置样式，每种类别为一组数据。通过上节的数据格式分析，我们获取到了realData，横坐标为日期信息：realdata.day，纵坐标为每个类别的数据信息：realdata.num.类别名，对应配置即可。
<template>
<div>
<h2>产品月销</h2>
<div class="chart" id="chartTwo">
<!-- 图表容器 -->
</div>
</div>
</template>
<script>import { inject, reactive, onMounted } from "vue";
export default {
setup() {
// 获取echarts对象
var $echarts = inject("echarts");
// 获取axios
var $axios = inject("axios");
// 获取整体数据
var dataTwo = reactive({});
var realdata = reactive([]);
// 自定义函数获取数据
async function getData() {
dataTwo = await $axios({ url: "/two/data" });
realdata = dataTwo.data.chartData.chartData;
// 控制台输出
console.log("dataTwo:", dataTwo);
console.log("dataTwo-real:", realdata);
}
// 钩子
onMounted(() => {
// 初始化echarts
var myChart = $echarts.init(document.getElementById("chartTwo"));
// 调用函数获取数据
getData().then(() => {
// 配置项
var option = null;
option = {
xAxis:{
type:'category',
data:realdata.day
},
yAxis:{
type:'value'
},
series:[
{
name:'Chemicals',
type:'line',
data:realdata.num.Chemicals
},
{
name:'Clothes',
type:'line',
data:realdata.num.Clothes
},
{
name:'Electrical',
type:'line',
data:realdata.num.Electrical
},
{
name:'digit',
type:'line',
data:realdata.num.digit
},
{
name:'gear',
type:'line',
data:realdata.num.gear
},
]
};
// 封装
myChart.setOption(option);
});
});
// 返回值
return { getData, dataTwo, realdata };
},
};</script>
<style>h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.3rem;
/* background-color: gray; */
}</style>
如下图所示，基本的折线图样式就已经出来了：
返回顶部
4、图标丰富
（1）字体颜色
option={
xAxis: {
type: "category",
data: realdata.day,
// 设置坐标轴上文字颜色
axisLine: {
lineStyle: {
color: "#fff",
},
},
},
yAxis: {
type: "value",
// 设置坐标轴上文字颜色
axisLine: {
lineStyle: {
color: "#fff",
},
},
},
series: [
............
]
}
Top
（2）设置提示框组件
option = {
tooltip: {
//提示框组件
trigger: "axis", // 坐标轴
axisPointer: {
type: "cross", // 十字样式
},
},
......
}
提示器坐标轴背景修改：
tooltip: {
//提示框组件
trigger: "axis",
axisPointer: {
type: "cross",
label: {
//坐标轴指示器的文本标签
backgroundColor: "#000", //文本标签的背景颜色就是x轴y轴上的内容
},
},
},
Top
（3）图例展示
官网参数配置
option = {
legend:{ // 图例
show:true // 默认显示置顶
},
xAxis:{
type:'category',
data:realdata.day
},
yAxis:{
type:'value'
},
series:[
..........
]
};
Top
（4）平滑曲线
series: [
{
name: "Chemicals",
type: "line",
smooth:true, // 平滑模式开启
data: realdata.num.Chemicals,
},
{
name: "Clothes",
type: "line",
smooth:true,
data: realdata.num.Clothes,
},
......
]
Top
（5）堆叠曲线图
官方实例
series: [
{
name: "Chemicals",
type: "line",
smooth:true, // 平滑模式开启
stack:'Total', // 堆叠样式 - 和
data: realdata.num.Chemicals,
},
{
name: "Clothes",
type: "line",
smooth:true,
stack:'Total',
data: realdata.num.Clothes,
},
......
]
Top
（6）堆叠面积填充
series: [
{
name: "Chemicals",
type: "line",
smooth: true, // 平滑模式开启
stack: "Total", // 堆叠样式 - 和
areaStyle: {
// 堆叠区域样式 --- 渐变色填充
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(128, 255, 165)",
},
{
offset: 1,
color: "rgb(1, 191, 236)",
},
]),
},
data: realdata.num.Chemicals,
},
{
name: "Clothes",
type: "line",
smooth: true,
stack: "Total",
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(0, 221, 255)",
},
{
offset: 1,
color: "rgb(77, 119, 255)",
},
]),
},
data: realdata.num.Clothes,
},
{
name: "Electrical",
type: "line",
smooth: true,
stack: "Total",
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 162, 255)",
},
{
offset: 1,
color: "rgb(116, 21, 219)",
},
]),
},
data: realdata.num.Electrical,
},
{
name: "digit",
type: "line",
smooth: true,
stack: "Total",
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 0, 135)",
},
{
offset: 1,
color: "rgb(135, 0, 157)",
},
]),
},
data: realdata.num.digit,
},
{
name: "gear",
type: "line",
smooth: true,
stack: "Total",
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 191, 0)",
},
{
offset: 1,
color: "rgb(224, 62, 76)",
},
]),
},
data: realdata.num.gear,
},
],
默认填充：
渐变色填充：
Top
（7）设置曲线宽度
series: [
{
name: "Chemicals",
type: "line",
data: realdata.num.Chemicals,
smooth: true, // 平滑模式开启
stack: "Total", // 堆叠样式 - 和
lineStyle: {
// 设置线段样式
width: 0,
},
areaStyle: {
// 堆叠区域样式
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(128, 255, 165)",
},
{
offset: 1,
color: "rgb(1, 191, 236)",
},
]),
},
},
......
]
Top
（8）隐藏所有数据点
series: [
{
name: "Chemicals",
type: "line",
data: realdata.num.Chemicals,
smooth: true, // 平滑模式开启
stack: "Total", // 堆叠样式 - 和
showSymbol: false,// 隐藏所有数据点
lineStyle: {
// 设置线段样式
width: 0,
},
areaStyle: {
// 堆叠区域样式
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(128, 255, 165)",
},
{
offset: 1,
color: "rgb(1, 191, 236)",
},
]),
},
},
......
]
Top
（9）高亮显示选中项
series: [
{
name: "Chemicals",
type: "line",
data: realdata.num.Chemicals,
smooth: true, // 平滑模式开启
stack: "Total", // 堆叠样式 - 和
showSymbol: false,// 隐藏所有数据点
lineStyle: {
// 设置线段样式
width: 0,
},
emphasis: {
//设置高亮的图形样式和标签样式
focus: "series", //只显示选中的内容高亮
},
areaStyle: {
// 堆叠区域样式
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(128, 255, 165)",
},
{
offset: 1,
color: "rgb(1, 191, 236)",
},
]),
},
},
......
]
Top
（10）坐标轴两边留白策略
xAxis: {
type: "category",
data: realdata.day,
boundaryGap: false,
// 设置坐标轴上文字颜色
axisLine: {
lineStyle: {
color: "#fff",
},
},
},
Top
（11）图像在容器中的位置
grid: {//组件离容器的距离
left: "1%",
right: "4%",
bottom: "3%",
containLabel: true, //grid 区域是否包含坐标轴的刻度标签
},
Top
