1.echarts按需引入
首页第一步安装echatrs
第二步在自己的项目中建立一个js文件或者ts文件都可以,名称自定义。
然后把官方的需要按需引入的代码放进去,自己需要什么表单组件或者功能按需添加
Handbook - Apache ECharts
import * as echarts from 'echarts/core';
import {
BarChart,
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineChart,
PieChart,
LineSeriesOption
} from 'echarts/charts';
import {
LegendComponent,
VisualMapComponent,
MarkAreaComponent,
TitleComponent,
// 组件类型的定义后缀都为 ComponentOption
MarkPointComponent,
MarkLineComponent,
TitleComponentOption,
TooltipComponent,
TooltipComponentOption,
GridComponent,
GridComponentOption,
// 数据集组件
DatasetComponent,
DatasetComponentOption,
// 内置数据转换器组件 (filter, sort)
TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
| LegendComponent
| BarSeriesOption
| LineSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
| MarkPointComponent
| MarkLineComponent
| MarkAreaComponent
| VisualMapComponent
>;
// 注册必须的组件
echarts.use([
LegendComponent,
VisualMapComponent,
MarkAreaComponent,
MarkLineComponent,
MarkPointComponent,
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
PieChart,
LineChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
//导出echarts表格
export default echarts
第三步把它导入到main.js/ts 主入口文件里面
然后在你需要使用的地方获取 vue 实例 appContext进行初始化后使用
// 通过 getCurrentInstance 访问内部组件实例
import { getCurrentInstance } from 'vue'
const echartsRef = ref(null)
const dataOne = [300, 280, 250, 260, 270, 300, 550]
onMounted(
() => {
//获取 vue 实例 appContext
const {appContext} = getCurrentInstance()
const myChart = appContext.config.globalProperties.$echarts.init(echartsRef.value)
const option = {
title:{
text:'内容数据(近7日)',
textStyle:{
color: '#101010',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: "category",
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type:'value',
// axisLabel: {
// formatter: '{value} W'
// },
},
visualMap: {
show: false,
dimension: 0,
pieces: [
{
lte: 3,
color: '#39dafe'
},
{
gt: 3,
lte: 7,
color: '#6f42fb'
},
]
},
series: [
{
name:'食品',
data: dataOne,
color:'#575efc',
stack:'num',
type:'line',
// 设置拐角是否圆滑
smooth: true,
markArea: {
itemStyle: {
color: 'rgba(215, 234, 252, 0.5)'
},
data: [
[
{
name: 'Morning Peak',
xAxis: 'Tue'
},
{
xAxis: 'Wed'
}
],
]
},
areaStyle:{},
//设置最大值和最小值
markPoint:{
itemStyle:{
normal:{
color:'#9574fb',
}
},
data: [
{
type:'max',name:'Max',
},
{
type:'min',name:'min',
},
]
},
markLine:{
data:[
{
type:"average",name:'平均值'
}
]
}
},
],
}
myChart.setOption(option);
// 监听页面的大小的变化,图表自适应大小
window.addEventListener("resize",() => {
myChart.resize()
})
}
)
然后效果应该是下图这样的
2.markPoint设置之后,最大值,最小值不显示的问题
一般按照官方的例子去做都可以出来的,出不来一是因为没有按需引入
第二种情况是x轴和y轴的数据量不对应,如果x轴是7个数据星期一到星期日,但是你y轴与之对应的多一条数据或者少一条数据,最大值和最小值都无法显示。