【可视化大屏系列】Echarts之折线图绘制

本文为个人近期学习总结,若有错误之处,欢迎指出!

Echarts之折线图绘制

前言

在前文页面布局DataV 的使用Echarts 的基础使用的基础上,开始绘制大屏中的折线图。

1.需求

绘制近一周来三种蔬菜的销售量趋势图

2.实现效果

3.大概思路

为简化代码量,将折线图封装为组件:

(1)子组件绘制基本折线图,图中有四条折线,因此series里应有四个系列(type值为'line');

(2)父组件向子组件传递数据:

①标题:字符串格式;

②类似['3.27','3.28','3.29','3.30','3.31','4.1','4.2']这样的数组,作为子组件图表的横坐标值,即xAxis.data;

③类似['胡萝卜', '蒜台', '土豆', '豆角']这样的数组,作为子组件每一个系列的name值,即series[i].name。(说明具体是哪一种蔬菜);

④类似[[120, 132, 101, 134, 90, 120, 132],[...],[...]]这样的数组,作为子组件图表每一个系列的data值,即series[i].data。(说明③中具体蔬菜的销售量值)

4.代码实现

子组件写法

HTML

html 复制代码
<template>
  <div class="block" style="height:100%;">
    <dv-border-box-13>
      <div class="title" style="height:20%;">
        {{ lineTitle }}
      </div>
      <div ref="lineArea" :style="{width: '100%',height: '80%'}" />
    </dv-border-box-13>
  </div>
</template>
javascript 复制代码
<script>
export default {
  // 子组件接收的四个数据
  props: {
    lineTitle: {
      type: String,
      default: ''
    },
    linex: {
      type: Array,
      default: () => []
    },
    liney: {
      type: Array,
      default: () => []
    },
    types: {
      type: Array,
      default: () => []
    }
  },
  // eslint-disable-next-line max-lines-per-function
  data () {
    return {
      option: {
        tooltip: { // 悬浮框
          trigger: 'axis', // 坐标轴触发
          backgroundColor: 'rgba(83,164,230,.6)',
          borderColor: 'rgba(83,164,230,1)', // 边框颜色
          textStyle: {// 设置文字样式
            color: 'rgba(255,255,255,1)',
            fontSize: 10
          }
        },
        legend: {// 图例
          top: '0%',
          right: '3%', // 图例组件离容器右侧的距离
          textStyle: { // 图例文字的样式
            color: 'rgba(255, 255, 255, .6)',
            fontSize: 10
          }
        },
        grid: { // 直角坐标系绘图网格
          left: '14%',
          bottom: '18%',
          top: '13%',
          right: '6%',
          containLabel: false // grid区域是否包含刻度标签
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: 'rgba(255, 255, 255, .6)'
            },
            axisTick: {
              show: 'true'
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, .6)'
              }
            }

            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.6)'
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: true
            },
            splitLine: {
              show: false
            }
          }
        ],
        // eslint-disable-next-line no-sparse-arrays
        series: [
          {

            // name: '入网量',
            type: 'line',
            smooth: true,
            lineStyle: {// 单独修改线的样式
              color: '#0184d5',
              width: 3
            },
            areaStyle: {

              // 渐变色,只需要复制即可
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(1, 132, 213, 0.4)' }, // 渐变色的起始颜色
                  { offset: 0.8, color: 'rgba(1, 132, 213, 0.1)' } // 渐变线的结束颜色
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)' // 图形阴影的模糊大小
            },
            symbol: 'circle',// 设置拐点 小圆点
            symbolSize: 8,// 拐点大小
            itemStyle: {// 设置拐点颜色以及边框
              color: '#0184d5'
            },
            showSymbol: true,// 开始显示拐点, 鼠标经过显示
            emphasis: {
              focus: 'series'
            }

            // data: [120, 132, 101, 134, 90, 230, 210]
          }
          //这里其它两个系列的配置代码与第一个对象元素相似,为节省篇幅,故省略
        ]
      }
    }
  },
  mounted () {
    //这块的赋值操作本应该是:监测liney的变化赋值才赋值,再绘制
    //详细内容请参考柱图绘制,这里不再详述
    this.option.xAxis[0].data = this.linex

    this.option.series[0].data = this.liney[0]
    this.option.series[1].data = this.liney[1]
    this.option.series[2].data = this.liney[2]

    this.option.series[0].name = this.types[0]
    this.option.series[1].name = this.types[1]
    this.option.series[2].name = this.types[2]
    this.drawLine()
  },
  methods: {
    drawLine () {
      let myLine = this.$echarts.init(this.$refs.lineArea)
      myLine.setOption(this.option, true)
      window.addEventListener('resize', () => {
        myLine.resize()
      })
    }
  }
}
</script>

CSS与前文"柱图绘制"相同,故这里省略。

父组件写法

HTML

html 复制代码
<lines-chart :line-title="lineTitle" :liney="lineYvalue" :linex="lineXvalue" :types="types" />

Javascript

引入组件和注册组件的部分代码与前文"柱图绘制"相似,这里写关键代码:

javascript 复制代码
data(){
  return {
    lineTitle: '折线图标题',
    lineXvalue: ['3.27', '3.28', '3.29', '3.30', '3.31', '4.1', '4.2'],
    lineYvalue: [[120, 132, 101, 134, 90, 120, 132], [12, 122, 81, 34, 97, 20, 32], [220, 182, 191, 234, 290, 220, 182]],
    types: ['胡萝卜', '蒜台', '土豆', '豆角']
  }
}
相关推荐
开心工作室_kaic42 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā42 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart3 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安4 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js