话不多说，直接上货。
首先，放上echarts官方链接，在画图表时，官方文档有时候能帮忙省很多事。
其中配置项手册对我们的作用最大，因为可以根据它配制出我们想要的效果 在这之前，我们要先安装echarts，这里我安装的是vue-echarts、echarts
npm install vue-echarts、echarts
引入
这里我不光用了2d,还用了3d，之后再介绍。这里我全部用的只是假数据，暂时还没有数据的交互。 现在进行第一个示例：
1.折线图
代码如下
option_onlineNum: {
grid: {
left: "3%",
right: "4%",
bottom: "4%",
containLabel: true,
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
data: ["9/1", "9/2", "9/3", "9/4", "9/5", "9/6", "9/7"],
//坐标轴刻度相关设置
axisTick: {
show: false,//不显示坐标轴刻度
},
//坐标轴轴线相关设置
axisLine: {
// show: true,
lineStyle: {
color: "#fff",
},
},
},
yAxis: {
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
splitLine: {
show: false,//是否显示分隔线
},
},
color: "#62DBED",
series: [
{
symbol: "none", //去掉上面的圆点
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth: true,
//区域颜色
areaStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "rgba(98,219,237,0)", // 0% 处的颜色
},
{
offset: 0,
color: "rgba(98,219,237,0.5)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
},
],
},
效果图：
2.饼图
代码如下
option_onlineNum: {
tooltip: {
trigger: "item",
},
title: {
text: 48,
textStyle: {
color: "#fff",
fontSize: 24,
},
subtext: "在线人数",
subtextStyle: {
color: "#fff",
fontSize: 18,
},
//主标题与副标题的间隔
itemGap: 40,
//标题的位置
x: "center",
y: "center",
},
color: "#2CBEFF",
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "50%"],//饼图的圈的粗细
avoidLabelOverlap: false,
//去掉图表中心原本显示的内容
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: false,
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [{ value: 48, name: "在线数量" }],
},
],
},
效果图：
3.3D图
3d图echarts也有应用，需要下载echarts-gl。
但是它的代码很长，我不想写很长的代码，所以我选择了另一个方法，用highcharts。
老步骤，先安装
npm i vue-highcharts highcharts
然后main引入
import highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(highcharts);
实例图：
//代码如下
<div style="height: 58%" class="bgbi" :id="id" :option="option"></div>
js:
option_column: {
chart: {
type: "pie",
backgroundColor: "rgba(0,0,0,0)", //背景底色改为透明
options3d: {
enabled: true,
alpha: 45,
depth: 5000,//摩多摩多
},
spacingTop: -45,
},
credits: {
enabled: false, //去掉右下角的"https://highcharts.com"的所有权
},
title: {
text: "58",
align: "center",
style: {
color: "#fff",
},
y: 160,
},
subtitle: {
text: "报警总数",
style: {
color: "#fff",
},
y: 190, //位置
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
dataLabels: {
enabled: false, //去掉外围折线
},
},
},
series: [
{
name: "货物金额",
size: 160, //饼图的面积大小
data: [
["香蕉", 8],
["猕猴桃", 3],
["桃子", 1],
["橘子", 6],
["苹果", 8],
["梨", 4],
["柑橘", 4],
["橙子", 1],
["葡萄 (串)", 1],
],
},
],
tooltip: {
animation: true,
},
},
const id = ref("test"); // vue2中可以直接使用 $refs.mapChartRef,vue3中需要定义，名称需要对应html标签上的ref名称
onMounted(() => {
HighCharts.chart(id.value, options.option_column);
});
效果图：
import HighCharts from "highcharts";
注意！！！，这里我的3d图遇到了点问题，就是我鼠标移到每个区域不会突出显示具体的内容，后来找到了原因，就是它depth给的太低了！！！它需要很多很多，然后就可以显示了
4.胶囊柱状图
实例图：
代码：
option_onlineNum: {
title: {
text: "剩余12G可用，共156GB",
textStyle: {
color: "#898989",
fontSize: 12,
fontWeight: 400,
},
bottom: -5,
left: "10%",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: "{b}:{c}%",
},
xAxis: {
type: "value",
show: false,
min: 0,
max: 100,
},
grid: {
height: "60%",
width: "75%",
top: "20%",
},
yAxis: {
position: "right",
type: "category",
data: ["博士"],
show: false,
axisTick: {
show: false,
},
axisLine: {
// 坐标轴 轴线
show: false, // 是否显示
},
axisLabel: {
fontWeight: "bold",
color: "#37e9fc",
fontSize: 16,
},
},
series: [
{
data: [75],
type: "bar",
showBackground: true,
backgroundStyle: {
borderWidth: 1,
borderColor: "#71A2AE",
color: "rgba(220, 220, 220, 0.1)",
borderRadius: [5, 5, 5, 5],
// barBorderRadius: [20, 20, 20, 30],
},
itemStyle: {
// 图形的形状
barBorderRadius: [20, 20, 20, 20],
color: "#37e9fc",
},
barCategoryGap: "50%",
barWidth: "40%",
},
],
}
效果图：
对亲有帮助的话，多多留言点赞留评论噢~(づ￣3￣)づ╭❤～
