乘风原创程序

  • Vue使用echarts定制特殊的仪表盘
  • 2022/3/27 11:40:34
  • 本文实例为大家分享了vue使用echarts定制特殊仪表盘的具体代码,供大家参考,具体内容如下

    实现的效果:(初始化以及浏览器resize的时候数字和弧形条均为递增动画)

    html部分:

    <!-- 为echarts准备一个具备大小(宽高)的dom -->
    <div class="main-echarts-contianer"
    ? ? ?ref="main">
    </div>

    css部分:

    .main-echarts-contianer {
    ? width: 480px;
    ? height: 320px;
    ? display: flex;
    ? align-items: center;
    ? justify-content: center;
    }

    js部分:

    drawclockchart () {
    ? // 指定图表的配置项和数据
    ? let option = {
    ? ? 'series': [
    ? ? ? {
    ? ? ? ? 'name': '个人指标',
    ? ? ? ? 'type': 'gauge',
    ? ? ? ? 'radius': '65%',
    ? ? ? ? 'startangle': '240',
    ? ? ? ? 'endangle': '-60',
    ? ? ? ? // 图表的刻度分隔段数
    ? ? ? ? 'splitnumber': 5,
    ? ? ? ? // 图表的轴线相关
    ? ? ? ? 'axisline': {
    ? ? ? ? ? 'show': true,
    ? ? ? ? ? 'linestyle': {
    ? ? ? ? ? ? 'color': [
    ? ? ? ? ? ? ? [
    ? ? ? ? ? ? ? ? 0.9,
    ? ? ? ? ? ? ? ? new this.$echarts.graphic.lineargradient(0, 0, 1, 0, [{
    ? ? ? ? ? ? ? ? ? offset: 0,
    ? ? ? ? ? ? ? ? ? color: '#ffd900'
    ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? {
    ? ? ? ? ? ? ? ? ? offset: 1,
    ? ? ? ? ? ? ? ? ? color: '#ff8000'
    ? ? ? ? ? ? ? ? }
    ? ? ? ? ? ? ? ? ])
    ? ? ? ? ? ? ? ],
    ? ? ? ? ? ? ? [1, '#56606e']
    ? ? ? ? ? ? ],
    ? ? ? ? ? ? 'width': 15
    ? ? ? ? ? }
    ? ? ? ? },
    ? ? ? ? // 图表的刻度及样式
    ? ? ? ? 'axistick': {
    ? ? ? ? ? 'linestyle': {
    ? ? ? ? ? ? 'color': '#0f1318',
    ? ? ? ? ? ? 'width': 2
    ? ? ? ? ? },
    ? ? ? ? ? 'length': 15,
    ? ? ? ? ? 'splitnumber': 1
    ? ? ? ? },
    ? ? ? ? // 图表的刻度标签(20、40、60等等)
    ? ? ? ? 'axislabel': {
    ? ? ? ? ? 'distance': -8,
    ? ? ? ? ? 'textstyle': {
    ? ? ? ? ? ? 'color': '#9e9e9e'
    ? ? ? ? ? }
    ? ? ? ? },
    ? ? ? ? // 图表的分割线
    ? ? ? ? 'splitline': {
    ? ? ? ? ? 'show': false
    ? ? ? ? },
    ? ? ? ? // 图表的指针
    ? ? ? ? 'pointer': {
    ? ? ? ? ? 'show': false
    ? ? ? ? },
    ? ? ? ? // 图表的数据详情
    ? ? ? ? 'detail': {
    ? ? ? ? ? 'formatter': function (params) {
    ? ? ? ? ? ? return '{title|' + '总体得分}' + '\n' + '{score|' + params + '}'
    ? ? ? ? ? },
    ? ? ? ? ? 'offsetcenter': [0, 0],
    ? ? ? ? ? 'rich': {
    ? ? ? ? ? ? 'title': {
    ? ? ? ? ? ? ? 'fontsize': 12,
    ? ? ? ? ? ? ? 'color': '#9e9e9e',
    ? ? ? ? ? ? ? 'lineheight': 30
    ? ? ? ? ? ? },
    ? ? ? ? ? ? 'score': {
    ? ? ? ? ? ? ? 'fontsize': 27,
    ? ? ? ? ? ? ? 'color': '#fff'
    ? ? ? ? ? ? }
    ? ? ? ? ? }
    ? ? ? ? },
    ? ? ? ? // 图表的标题
    ? ? ? ? 'title': {
    ? ? ? ? ? 'offsetcenter': [0, '90%'],
    ? ? ? ? ? 'color': '#fff',
    ? ? ? ? ? 'fontsize': 14
    ? ? ? ? },
    ? ? ? ? 'data': [{
    ? ? ? ? ? 'name': '完成',
    ? ? ? ? ? 'value': 31
    ? ? ? ? }]
    ? ? ? },
    ? ? ? {
    ? ? ? ? 'name': '外层线',
    ? ? ? ? 'type': 'gauge',
    ? ? ? ? 'radius': '72%',
    ? ? ? ? 'startangle': '240',
    ? ? ? ? 'endangle': '-60',
    ? ? ? ? 'center': ['50%', '50%'],
    ? ? ? ? 'axisline': {
    ? ? ? ? ? 'linestyle': {
    ? ? ? ? ? ? 'width': 1,
    ? ? ? ? ? ? 'color': [[1, '#56606e']]
    ? ? ? ? ? }
    ? ? ? ? },
    ? ? ? ? 'splitline': {
    ? ? ? ? ? 'length': -6,
    ? ? ? ? ? 'linestyle': {
    ? ? ? ? ? ? 'opacity': 0
    ? ? ? ? ? }
    ? ? ? ? },
    ? ? ? ? 'axislabel': {
    ? ? ? ? ? 'show': false
    ? ? ? ? },
    ? ? ? ? 'axistick': {
    ? ? ? ? ? 'splitnumber': 1,
    ? ? ? ? ? 'linestyle': {
    ? ? ? ? ? ? 'opacity': 0
    ? ? ? ? ? }
    ? ? ? ? },
    ? ? ? ? 'detail': {
    ? ? ? ? ? 'show': false
    ? ? ? ? },
    ? ? ? ? 'pointer': {
    ? ? ? ? ? 'show': false
    ? ? ? ? }
    ? ? ? }
    ? ? ]
    ? }
    ? let tempval = 0
    ? clearinterval(this.clockcharttimer)
    ? this.clockcharttimer = setinterval(() => {
    ? ? if (tempval > this.myivstrability) {
    ? ? ? clearinterval(this.clockcharttimer)
    ? ? ? // 最后转到最终数据的地方
    ? ? ? option.series[0].data[0].value = this.myivstrability
    ? ? ? option.series[0].axisline.linestyle.color[0][0] = this.myivstrability / 100
    ? ? ? // 使用刚指定的配置项和数据显示图表
    ? ? ? this.mychart.setoption(option)
    ? ? ? // 初始化渲染完成
    ? ? ? this.rendercompleted = true
    ? ? ? return
    ? ? }
    ? ? option.series[0].data[0].value = tempval
    ? ? option.series[0].axisline.linestyle.color[0][0] = tempval / 100
    ? ? // 使用刚指定的配置项和数据显示图表。
    ? ? this.mychart.setoption(option)
    ? ? tempval++
    ? }, 20)
    ? // 此处监听浏览器的resize,重新渲染图表
    ? let that = this
    ? window.addeventlistener("resize", function () {
    ? ? cleartimeout(that.resizetimer)
    ? ? that.resizetimer = settimeout(() => {
    ? ? ? mychart.resize()
    ? ? }, 500)
    ? })
    }