前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue项目:重温echart图表库,折线加柱状图。

vue项目:重温echart图表库,折线加柱状图。

作者头像
江咏之
发布2022-06-16 11:49:35
3630
发布2022-06-16 11:49:35
举报
文章被收录于专栏:技术社区
在这里插入图片描述
在这里插入图片描述

最近的项目又用到了图表库,这个艰巨的任务又交到了我手上,一年没有碰过echats了,时间久了反而手生。发个博客纪念下。

html:

代码语言:javascript
复制
    <div class="chartView">
      <div id="loanNum"></div>
    </div>

js:

代码语言:javascript
复制
    initNumChart() {
      let myChart = this.$echarts.init(document.getElementById('loanNum'))
      let colors = ['#5470C6', '#91CC75', '#FF9600']
      let option = {
        title: {
          text: '借贷走势图'
        },
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['借贷金额', '平均金额', '借贷笔数']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            // prettier-ignore
            data: this.dateList
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '平均金额',
            min: 0,
            max: 1000,
            position: 'right',
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: '{value} 万/笔'
            }
          },
          {
            type: 'value',
            name: '借贷金额',
            min: 0,
            max: 100000,
            position: 'right',
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              }
            },
            axisLabel: {
              formatter: '{value} 万'
            }
          },
          {
            type: 'value',
            name: '借贷笔数',
            min: 0,
            max: 1000,
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2]
              }
            },
            axisLabel: {
              formatter: '{value} 笔'
            }
          }
        ],
        series: [
          {
            name: '平均金额',
            type: 'bar',
            data: this.avgAmountList
          },
          {
            name: '借贷金额',
            type: 'bar',
            yAxisIndex: 1,
            data: this.loanAmountList
          },
          {
            name: '借贷笔数',
            type: 'line',
            yAxisIndex: 2,
            data: this.loanNumList
          }
        ]
      }
      myChart.setOption(option)
    }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-10-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档