一、 npm i echarts -s
二、 main.js引入
import * as echarts from 'echarts'
const app = createApp(App)
app.config.globalProperties.$echarts = echarts
三、路由使用
<template>
<div class="box">
<div id='showorders' style='width:1000px; height:500px'></div>
</div>
</template>
<script setup>
import {onMounted} from "vue"
import * as echarts from 'echarts';
onMounted(()=>{
init()
})
const init =()=>{
let chartDom = document.getElementById('showorders');
let myChart = echarts.init(chartDom);
// 指定图表的配置项和数据
let option;
option = {
// # 鼠标悬停
tooltip:{
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter:function (val){ //可以自己定义框的内容
return val.name +": "+ val.value
},
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
borderColor: '#fff', // 提示框浮层的边框颜色
borderWidth: 1, //边框宽度
padding: [ // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
5, // 上
10, // 右
5, // 下
10, // 左
],
textStyle: { // 提示框浮层的文本样式
color: '#fff', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格 可选：'normal'(常规) 'italic'(斜体) 'oblique'(倾斜)
fontWeight: '600', // 文字字体的粗细 可选：'normal'(常规) 'bold'(粗体) 'bolder'(加粗) 'lighter'(细体) 100 | 200 | 300 | 400...(像素)
fontFamily: 'sans-serif', // 文字的字体系列 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: 14, // 文字的字体大小
lineHeight: 56, // 行高
width: 15, // 文本显示宽度
height: 15, // 文本显示高度
textBorderColor: 'red', // 文字本身的描边颜色
textBorderWidth: 2, // 文字本身的描边宽度
textBorderType: 'solid', // 文字本身的描边类型 可选：'solid'(实线) 'dashed'(虚线) 'dotted' 自v5.0.0开始，也可以是number或者number数组 如：textBorderType: [5, 10]，用以指定线条的 dash array，配合textBorderDashOffset可实现更灵活的虚线效果
textBorderDashOffset: 5, // (从v5.0.0开始支持)用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果
textShadowColor: 'transparent', // 文字本身的阴影颜色
textShadowOffsetX: 0, // 文字本身的阴影X偏移
textShadowOffsetY: 0, // 文字本身的阴影Y偏移
overflow: 'none', // 文字超出宽度是否截断或者换行。配置width时有效'truncate'截断，并在末尾显示ellipsis配置的文本，默认为... 'break' 换行'breakAll'换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
textShadowBlur: 0, // 文字本身的阴影长度
ellipsis: '这里是末尾显示的文本', // 在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',// 额外附加到浮层的css样式。如左面为浮层添加阴影的示例
order: 'seriesAsc', // (从v5.0.0开始支持)多系列提示框浮层排列顺序。默认值为 'seriesAsc' 提示框排列顺序可选值:'seriesAsc'根据系列声明, 升序排列。 'seriesDesc'根据系列声明, 降序排列。 'valueAsc'根据数据值, 升序排列。 'valueDesc'根据数据值, 降序排列。
},
//不常用属性
alwaysShowContent:false, //提示跟着鼠标进行移动并且不会消失
showDelay:0, //鼠标移入的延迟时间ms
hideDelay: 0, //鼠标移入的延迟时间ms alwaysShowContent 为true无效
appendToBody:true
},
// # 图标离容器的距离
grid:{
show:true,
left: "10%",
top: "10%",
// right: "20%",
bottom: "5%",
backgroundColor: "rgba(224, 17, 17, .3)", // 格子颜色区域
borderColor: "red", //最外层线条
},
// # x轴
xAxis: {
name:"111",
position: 'right', // x 轴的位置（'top'，'bottom'）
show: true, // 是否显示 x 轴
type: 'category', //'value' 数值轴，适用于连续数据。 'time' 时间轴， 'log' 对数轴。适用于对数数据。,
nameRotate: 10, // 坐标轴名字旋转，角度值
inverse: false, // name位置 在左侧
splitNumber: 5, // 坐标轴的分割段数（预估值）
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [5, 7], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#000', // 坐标轴线线的颜色 以及箭头和文字的颜色
width: '2', // x坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
// # x轴刻度线
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内，默认朝外
length: 5, // 坐标轴刻度的高度
lineStyle: {
color: 'red', // 刻度线的颜色
width: 2, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
// # x轴
axisLabel: {
show: true, // 是否显示刻度标签
interval: 0, // 坐标间隔 0 是所有 1是空一个，以此类推
inside: false, // 刻度标签是否朝内，默认朝外
rotate:0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
margin:10, // 刻度标签与轴线之间的距离
// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
formatter:function (value) {
return value
},
color: 'red', // 刻度标签文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: '600', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'top', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '20', // 行高 ）
backgroundColor: '#123234', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
// # 分隔线 块状
splitLine: {
show: false, // 是否显示
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
lineStyle: {
color: ['#000'], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
type: 'dashed', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
width: 1,
},
},
// # 是否显示分隔区域
splitArea: {
show: false, // 是否显示分隔区域
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
areaStyle: {
color: ['rgba(250,250,20,0.3)','rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
shadowBlur: 10, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
shadowColor: 'rgba(0, 0, 0, 1)', //区域阴影
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
},
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// # y 轴 如果只有以一个坐标轴那么yAxis是一个对象，如果是两个那么就是一个数组
yAxis: [
{
name:"t",
type: 'value',
position: 'left', //默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧
nameRotate: 0, //y 轴的title
nameLocation: 'end', // 坐标轴名称显示位置'start、middle、center、end
nameGap: 10, // y坐标轴名称与轴线之间的距离
inverse: false, // 是否是反向坐标轴 类似于倒立
nameTextStyle: {
color: 'red', // 坐标轴名称的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'bottom', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高 ）
backgroundColor: 'rgba(0,23,11,0.3)', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [5, 7], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#333', // 坐标轴线线的颜色
width: '2', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
// # y轴刻度
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: false, // 坐标轴刻度是否朝内，默认朝外
length: 5, // 坐标轴刻度的长度
lineStyle: {
color: '#000', // 刻度线的颜色
width: 10, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
axisLabel: {
show: true, // 是否显示刻度标签
interval:1, // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
inside: false, // 刻度标签是否朝内，默认朝外
rotate: 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
margin: 20, // 刻度标签与轴线之间的距离
// // formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
color: '#000', // 刻度标签文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'right', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'middle', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高 ）
backgroundColor: 'rgba(0,23,11,0.3)', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
splitLine: {
show: true, // 是否显示
interval: 1, // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
lineStyle: {
color: ['#000'], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
type: 'dashed', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
width: 1,
},
},
splitArea: {
show: false, // 是否显示分隔区域
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
areaStyle: {
color: ['rgba(250,250,20,0.3)','rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
shadowBlur: 10, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
shadowColor: 'rgba(0, 0, 0, 1)', //区域阴影
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
},
},
},
//第二个坐标轴右侧
{
name: "增长率(%)",
type: "value",
// min: 0,
// max: 70,
// position: "right",
// formatter: "{value}%",
axisLabel: {
textStyle: {fontSize: 20},
formatter: '{value}', // 给坐标轴标签加单位
},
// nameTextStyle: {fontSize: 20},
itemStyle: {
color: "#ffd07a"
}
}
],
// # 类型
series: [
{
markLine:{
precision:5, //在划线的时候取精确小数
data:[ // 支持 'average', 'min', 'max' 也可以自定义线
{ type:"average",name:'平均值'},
{ type: "max", name: "最大值" },
{ type: "min", name: "最小值" },
{ name: '水平线', yAxis: 100},
],
itemStyle: {
normal: {
lineStyle: {
color: '#000',
type: 'dotted',// （'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
width:3
},
label:{
show:true,
position:"left",
fontSize: '14',
align: 'left', //文字的位置
color: 'red',
formatter:function(val){
return val.name +": " + val.value
}
}
}
},
},
data:[
150,
{ //指定某一个的颜色
value: 200,
itemStyle: {
color: '#a90'
},
},
224,
218,
135,
147,
260
],
type:'bar' // bar 柱状图 line 折线图 ,pie 饼图
},
{
name: '销量折线图',
type: 'line',
data: [100000,20000,30000,40000,50000,60000,70000],
barWith: "40%",
label: {
show: true,
position: "top",
formatter: "{c}%"
},
lineStyle: {
color: "#ffb122"
},
yAxisIndex: 1
},
]
};
option && myChart.setOption(option);
}
</script>
<style scoped>
</style>