Echarts项目
1.安装使用:
npm i echarts vue-echarts
2.全局注册echarts
文件:
plugins/echarts.ts
// 引入echarts
import * as $echarts from 'echarts'
// 引入App类型
import type { App } from 'vue'
// 引入vue-echarts插件
import VueEcharts from 'vue-echarts'
// 注册全局组件
const vueEcharts = (app: App) => {
app.component('v-chart', VueEcharts)
}
// 暴露echarts对象和全局组件
export {
$echarts,
vueEcharts
}
文件:
main.ts
import {vueEcharts} from './plugins/echarts'
app.use(vueEcharts)
3.组件使用
//准备一个容器(必须有高度)
<div ref="chart" style="width:50%;height:376px"></div>
//1.引入文件
import { $echarts } from '@/plugins/echarts';
//2.初始化元素
const myChart=$echarts.init(this.$refs.chart)
//3.创建项目实例,引入数据 myChart.setOption(
{
xAxis: {
data: (x轴数据),
show: false
},
yAxis: {
show: false
},
grid: {(网格组件:离容器离侧边的距离)
left: 0,
right: 0,
top: 0,
bottom: 0
},
series: [
{
type: 'line',
smooth: true,(是否平滑曲线显示)
data:(列表数据)
itemStyle: {
opacity: 0,(折线拐点标志的样式:透明)
},
lineStyle: {
opacity: 0,(线条样式:透明)
},
areaStyle: {
color: 'pink'
}
}
]
})
经常使用样式:
title: 标题组件
text: '主标题文本'
subtext: '子标题文本'
textStyle: 主标题字体样式
color: 颜色
fontSize: 大小
subtextStyle: 子标题字体样式
color: 颜色
fontSize: 大小
left: 离容器左侧的距离
top: 离容器上面的距离
textAlign: 标题的对齐方式
legend: 图例组件
orient: 多个图例的排列方式 horizontal/vertical
left: 离容器左侧的距离
top: 离容器上面的距离 middle正中间
textStyle: 字体样式
color: 颜色
grid: 网格组件
left: 离容器左侧的距离
top: 离容器上面的距离
right: 离容器右侧的距离
bottom: 离容器下侧的距离
xAxis: x轴组件
yAxis: y轴组件
show: 是否显示
data: X轴列表数据
type: 坐标轴类型 category:类目轴 / value: 数值轴
boundaryGap: 坐标轴两边是否留白
min: 坐标轴刻度最小值
max: 坐标轴刻度最大值
axisLine: 坐标轴轴线
show: 是否显示
axisTick: 坐标轴刻度
show: 是否显示
alignWithLabel: 刻度线与标题对齐是否对齐
splitLine: 分隔线
lineStyle: 线的样式
type: 线的类型 实线: 'solid' / 虚线: 'dotted',
color: 颜色
axisLabel: 坐标轴刻度标签
show: 是否显示
tooltip: 提示框组件
trigger: 触发方式 item:数据项图形触发 / axis: 坐标轴触发
formatter: 指定提示的内容 (params) => 要显示的内容
series: 系列组件
type: 图表类型 line: 折线图 / bar: 柱状图 / pie: 饼状图
name: 系列名称
data: 列表数据
label: 图形上的文本标签
show: 是否显示 默认不显示
color: 字体颜色
position: 位置 top:上面 / right:右侧 / outside: 外部
formatter: 指定要显示的自定义内容
distance: 距离
lineStyle: 线条样式
itemStyle: 折线拐点标志的样式
areaStyle: 区域填充样式
opacity: 透明度
color: 颜色
smooth: 是否平滑曲线显示
barWidth: 柱条的宽度
showBackground: 是否显示柱条的背景色
backgroundStyle: 柱条的背景样式
center: 饼图的中心(圆心)坐标
radius: 饼图的半径 如果是[value1, value2]就形成圆环图
avoidLabelOverlap: 是否启用防止标签重叠, 圆环图都不开启
itemStyle 图形样式
borderColor: 描边颜色
borderWidth: 描边线宽
labelLine 标签的视觉引导线
length: 引导线第一段的长度
length2: 引导线第二段的长度
smooth: 是否平滑视觉引导线
color: 图例颜色列表