Vue+Echarts+datav实现数据可视化

首先来看效果图

机器人巡检异常告警数据可视化

某矿场生产数据可视化（快速原型）

模块化

<template>
    <div :id="'barChart' + barSet.barIndex" ref="barChart" style="width: 100%; height: 30vh"></div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "barChart",
        props: {
          barSet: { type: Object, required: true }
        },
        data() {
            return {
                timer: null,
                option: {
                    xAxis: [
                        {
                            data: []
                        }
                    ],
                    yAxis: [

                    ],
                    series: [

                    ]
                }
            }
        },
        methods: {
            createLineChart() {
                var chartDom = this.$refs.barChart
                var myChart = echarts.init(chartDom);
                this.option.series.forEach(item => {
                    item.data = []
                })
                this.option = {
                    grid:{
                        x:55,
                        y:35,
                        x2:10,
                        y2:165,
                        borderWidth:10
                    },
                    title: {
                        text: this.barSet.title,
                        textStyle: {
                            fontSize: 15,
                            fontWeight: 'normal',              //标题颜色
                            color: '#ffffff',
                        },
                    },
                    xAxis: {
                        data: this.barSet.dataAxis,
                        axisLabel: {
                            inside: false,
                            color: '#fff'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        z: 5
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#999'
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            showBackground: true,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: 'rgb(34,69,114)' },
                                    { offset: 1, color: 'rgb(4,17,83)' }
                                ])
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#2378f7' },
                                        { offset: 0.7, color: '#2378f7' },
                                        { offset: 1, color: '#83bff6' }
                                    ])
                                }
                            },
                            data: this.barSet.data
                        }
                    ]
                };
                // Enable data zoom when user click bar.
                const zoomSize = 7;
                myChart.on('click', function (params) {
                    console.log(this.barSet.dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                    myChart.dispatchAction({
                        type: 'dataZoom',
                        startValue: this.barSet.dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                        endValue:
                            this.barSet.dataAxis[Math.min(params.dataIndex + zoomSize / 2, this.barSet.data.length - 1)]
                    });
                });

                this.option && myChart.setOption(this.option);
            }
        },
        mounted() {
            this.createLineChart()
            this.timer = setInterval(() => {
                this.createLineChart()
            }, 10000)
        },
        beforeDestroy () {
            clearInterval(this.timer)
        }
    }
</script>

<style scoped>

</style>

<template>
  <div>
    <el-row class="row-bg" style="padding: 100px 2vw 30px 2vw">
        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 0px;padding-bottom: 10px">
            <bar-chart
                :bar-set="bar1"
            ></bar-chart>
          </el-card>
        </dv-border-box-10>

        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 20px;padding-bottom: 5px">
              <bar-chart :bar-set="bar2"
              ></bar-chart>
          </el-card>
        </dv-border-box-10>

        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 20px;padding-bottom: 10px">
              <bar-chart :bar-set="bar3"
              ></bar-chart>
          </el-card>
        </dv-border-box-10>
      </el-row>
  </div>
  </template>

<script>
import barChart from './barChart'
export default {
  name: 'alarmData',
  components:{
    barChart
  },
  data () {
    return {
        timer: null,
        totalAlarmNum: 0,
        monthAlarmNum: 0,
        classoneAlarmNum: 0,
        classtwoAlarmNum: 0,
        bar1:{
            barIndex:'1',
            title:'近七天选矿',
            dataAxis:['11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08'],
            data:[152235, 60000, 150000, 10000, 90000, 110000, 70000],
        },
        bar2:{
            barIndex:'2',
            title:'近七天宏基建设',
            dataAxis:['11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08'],
            data:[15223, 20000, 60000, 50000, 15000, 30000, 20000],
        },
        bar3:{
            barIndex:'3',
            title:'近七天地采',
            dataAxis:['11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08'],
            data:[15235, 6000, 15000, 10000, 9000, 7000, 3000],
        }
    }
  },
  created () {

  },
  mounted () {
    this.timer = setInterval(() => {
      this.getData()
    }, 5000
    )
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {

  }
}
</script>

通过props实现组件之间通信
可在父级界面直接传递想要显示的数据
甚至可以将__样式__也封装进props中实现更加灵活的组件

gitee项目链接