<template>
<div>
<div class="charts" ref="charts" :style="{'height': height}"></div>
</div>
</template>
<script type="text/ecmascript-6">
import echarts from 'echarts'
import {event} from 'common/js/event'
//波浪折线图
export default {
props:{
title: {
type: String,
default: '默认标题'
},
xAxisDataArr: { //X轴数据
type: Array,
default: () => { return ['周一','周二','周三','周四','周五','周六','周日']}
},
seriesDataArr: { //数据
type: Array,
default: () => { return [120, 132, 101, 134, 90, 230, 210] }
},
color: { //颜色
type: String,
default: '#0076fe'
},
bgColor: {
type: String,
default: '#d1e3f8'
},
smooth: { //true 平滑 false折线
type: Boolean,
default: true
},
fontSize: {
type: Number,
default: 12,
},
fontColor: {
type: String,
default: '#444'
},
fontWeight: {
type: String,
default: 'bold'
},
height: {
type: String,
default: '200px'
},
dataZoom: { //滑动
type: Boolean,
default: false
},
showLine: { //是否显示横向网格线
type: Boo
echarts使用,一次实例的心得
最新推荐文章于 2024-08-13 18:13:57 发布
本文分享了作者在使用Echarts绘制折线图时的心得体会,包括图形扩展性、轴的灵活性以及默认样式的设置。在解决折线图点击事件体验不佳的问题上,提出了创新思路:利用透明柱状图模拟点击事件,并通过onmouseover事件优化交互,但需注意避免多次触发的优化策略。
摘要由CSDN通过智能技术生成