vue3使用echarts绘制折线图的代码示例
更新时间：2023年07月31日 11:11:58 作者：大聪明2_0
这篇文章主要为大家学习介绍了Vue3如何使用echarts实现绘制折线图,文中有详细的示例代码供大家参考,感兴趣的小伙伴可以跟随小编一起学习一下
简单折线图配置
引入echarts
``` npm install echarts //下载依赖
import * as echarts from 'echarts' //引入初始化及其调用
```const renderChart = () => {
const el = document.querySelector('“获取到元素”')
const myChart = echarts.init(el)
myChart.setOption(
{
xAxis: {
type: 'category', //x轴类型
data: ['', '5', '10', '15', '20', '25', '30'],
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: false, //不显示X轴
lineStyle: {//X轴样式
color: "rgba(100,100,100,1)" //X轴字体颜色
}
},
axisPointer: { //坐标轴指示器配置项
type: 'shadow'
},
boundaryGap: false,//坐标轴两边留白
axisTick: { // 是否显示坐标轴刻度
show: false, //不显示刻度
alignWithLabel: true //刻度与标签对齐
},
axisLabel: { // 坐标轴刻度标签的相关设置
color: '#666', //字体颜色
fontSize: 12 //字体大小
}
},
yAxis: {
type: 'value', // y轴类型
min: 0, // y轴最小值
max: 100, // y轴最大值
interval: 20, // y轴间隔
splitLine: { //网格线
show: true,
lineStyle: { // 网格线样式
color: '#d9d9d9',// 网格线颜色
type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
width: 1 //设置网格线宽度
}
},
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: false //不显示X轴
},
axisTick: { // 是否显示坐标轴刻度
show: false //不显示刻度
},
splitArea: { //网格区域
show: false //不显示网格区域
}
},
grid: { //图表位置
top: '30px',
left: '0px',
right: '10px',
bottom: '0px',
containLabel: true, // 是否预留坐标轴宽度
},
series: [ //数据
{
// q: 如何让x轴也共享y轴上的0
// a: 1.设置y轴的min为0
data: [4, 43, 23, 76, 45, 4, 43], //数据
type: 'line',//
smooth: true,//平滑曲线
symbol: 'circle',
symbolSize: 0,//拐点大小
itemStyle: {//拐点颜色
color: '#00a0e9' //拐点颜色
},
lineStyle: {//线条颜色
color: '#00a0e9' //线条颜色
}
}
]
}
)
}效果图：
稍微复杂折线图
封装成了一个组件，和上面的简单折线图多了一些配置，直接上代码：
``` <script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
const brokenLine = () => {
//获取对应的dom元素
const el = document.querySelector('.chart-box1')
// 初始化
const myLine = echarts.init(el)
// 设置option
let option = ref({})
myLine.setOption(
option.value = {
tooltip: { //类似于hover效果鼠标放上显示弹框
borderColor: '#EBEEF5',
borderWidth: 1,
padding: [5, 16, 5, 14],
trigger: 'axis', //触发类型为坐标轴
backgroundColor: 'rgba(255,255,255,0.96)',
formatter: (params) => {
return (
'<span style="color:#818693;font-size:12px;margin-right:17px;margin-bottom:4px;display:inline-block">日期：</span>' +
'<span style="color:#20232A;font-size:12px;display:inline-block">' +
params[0].name +
'</span>' +
'<br />' +
('<span style="color:#818693;font-size:12px;margin-bottom:4px;display:inline-block">订单总量：</span>' +
'<span style="color:#20232A;font-size:12px;display:inline-block;float:right">' +
params[0].data +
'笔' +
'</span>')
)
}
},
grid: { //图表位置
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true // 是否预留坐标轴宽度
},
xAxis: {
type: 'category', //x轴类型
boundaryGap: true, // 坐标轴两边留白
data: ['2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04'], //x轴数据折线图下面数据
axisLabel: { // 坐标轴刻度标签的相关设置。
show: true, //显示x轴
interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
textStyle: {
color: '#20232A',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12
},
margin: 17
},
axisTick: {
// 坐标轴刻度相关设置。
show: false , //不显示刻度
alignWithLabel:true // 刻度与标签对齐
},
axisLine: { //坐标轴轴线相关设置 --x轴
// 坐标轴轴线相关设置
lineStyle: { // x轴样式
color: '#E5E9ED' // x轴字体颜色
// opacity:0.2
}
},
splitLine: {//splitLine的作用是将坐标轴上的数值分隔开来，splitLine通常是水平或垂直的，
// 坐标轴在 grid 区域中的分隔线。
show: false, // 不显示x轴
lineStyle: { //x轴样式
color: '#E5E9ED'
// opacity:0.1
}
}
},
yAxis: [
{
type: 'value', //y轴类型
// splitNumber: 5, //刻度的数量
axisLabel: { //axisLabel指的是坐标轴上的标签，用于标识坐标轴上每个刻度所代表的具体数值。axisLabel通常包括数值的单位和数值的格式等信息，以帮助读者更好地理解数据。
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12
}
},
axisLine: { //坐标抽轴线相关设置
show: false //不显示
},
axisTick: { //是否显示坐标轴刻度
show: false //不显示
},
splitLine: { //网格线
show: true,
lineStyle: { //网格线样式
color: '#E5E9ED'
// opacity:0.1
}
}
}
],
series: [
{
symbol: 'circle', //类型
symbolSize: 6, //拐点大小
name: '2019',
type: 'line',
itemStyle: { //拐点颜色
normal: {
color: '#E25433',
lineStyle: { //线条颜色
color: '#E25433',//线条颜色
width: 1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(225,85,54,0.21)'
},
{
offset: 1,
color: 'rgba(225,85,54,0.00)'
}
])
}
}
},
data: [24322, 74423, 12244, 13312, 14132, 15532], //数据
}
]
},
myLine.setOption(option),
// 当窗口或者大小发生改变时执行resize，重新绘制图表
window.addEventListener('resize', function() {
myLine.resize()
})
)
}
onMounted(() => {
brokenLine()
})
</script>
<template>
<div class="chart-box1"></div>
</template>
<style lang="scss" scoped>
.chart-box1 {
width: 100%;
height: 400px;
// background-color: antiquewhite;
}
</style>效果图如下：
到此这篇关于vue3使用echarts绘制折线图的代码示例的文章就介绍到这了,更多相关vue3 echarts折线图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于Vue中$root使用方法及注意事项的相关资料,vue中$root是用来访问根组件的,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了关于vue的列表图片选中打钩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
watchEffect，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数，本文主要介绍了Vue3中watchEffect的具体用法，感兴趣的可以了解一下2022-05-05
这篇文章主要介绍了Vue安装浏览器开发工具步骤详解，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
在网上找了好久关于左右过渡动画折叠的组件,没有合适的代码,效果类似于element UI中的Drawer抽屉组件,只不过ele中的都是悬浮的组件,工作中遇到的很多都是占用空间的展开折叠,网上很多也是上下展开收起的组件,于是就自己写了一个,分享给大家,感兴趣的朋友参考下吧2023-11-11
Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型2022-12-12
toRef 和 toRefs都是Vue3 中的响应式转换工具函数,换句话说,toRef 和 toRefs 就是用来创建响应式的引用的,主要用来取出响应式对象里的属性,或者解构响应式对象,本文小编就来带大家搞清楚Vue3中toRef和toRefs的区别,需要的朋友可以参考下2023-09-09
Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序。这篇文章主要介绍了electron-vue多显示屏下将新窗口投放是其他屏幕 ,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue路由跳转到新页面实现置顶问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了VUE+jszip如何实现下载多个文件导出为一个zip格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论