直接参考官网[ECharts](https://echarts.apache.org/handbook/zh/basics/import)
示例单个组件按需引入使用:(需要全局注册的根据es6写法自行引入全局)
版本: "echarts": "^5.2.0",
<template>
<!-- h5页面显示 -->
<div id="echart-box"></div>
</template>
<script>
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表,图表后缀都为 Chart
import { BarChart, LineChart } from 'echarts/charts';
// 引入提示框,标题,直角坐标系组件,组件后缀都为 Component
import {
TooltipComponent,
TitleComponent,
GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
BarChart,
LineChart,
CanvasRenderer
]);
import { onMounted, reactive } from 'vue';
setup(){
// 图标的参数信息 可查询官网看例子 或者可以直接复制官网的option过来直接展示
let option = reactive({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
name: '星期几'
},
yAxis: [
{
type: 'value',
name: 'test'
// 百分比显示y轴
// min: 0,
// max: 100,
// axisLabel: {
// formatter: '{value} %'
// }
},
{
type: 'value',
name: 'test'
// 百分比显示y轴
// min: 0,
// max: 100,
// axisLabel: {
// formatter: '{value} %'
// }
}
],
series: [
{
// 在 ECharts 中,我们使用字符串 '-' 表示空数据
data: [10, 10, '-', 15, 10, 5, 35],
type: 'line' // bar 柱形图 line 折线图
// smooth: true // 平滑曲线
}
],
title: {
text: '测试echart(标题)',
// subtext: '子标题',
textStyle: {
fontSize: 22,
fontWeight: 'bold', //样式
color: 'red'
},
subtextStyle: {
fontSize: 16,
color: '#000'
}
},
//提示框取默认值,即鼠标移动到柱状图会显示内容
tooltip: {
trigger: 'axis', //触发类型;轴触发,axis则鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据,
axisPointer: {
type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
lineStyle: {
color: 'red'
}
}
}
});
onMounted(() => {
// 接下来的使用,初始化图表,设置配置项
let echartBox = document.getElementById('echart-box');
let myChart = echarts.init(echartBox);
myChart.setOption(option);
// 绑定事件 都是小写
myChart.on('click', function (params) {
// 控制台打印数据的名称
console.log(params);
});
});
return {};
}
</script>
vue3使用ECharts简单例子
于 2022-04-22 15:11:56 首次发布