vue与echarts配合开发仪表盘

vue特别合适使用做系统可交互原型。它直接操作数据对象的方式，也能让开发代码量减少许多，下面是做项目中遇到的一个业务场景，用vue与echarts的配合，生成仪表盘图表，

一、先看一下效果图

二、看一个html代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=yes">
    <title>Machine Uptime</title>
   
</head>
<body>
    <div id="vueapp">
		<!-- 显示状态图 -->
        <div title="UptimeStatus" style="width:100%">
            <div style="float:left;width:180px;" v-for="machine in machines">
                <img v-bind:src="'images/home/' + machine.status +'.png'" />
            </div>
        </div>
        <div title="MachineList" style="width:100%">
           
        </div>
		<!-- 显示echart -->
        <div title="Uptime" style="width:100%">
            <div style="float:left;" v-for="machine in machines">
               <div style="width:180px;height:180px;" v-bind:id="'chart_'+machine.name"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="JS/vue.min.js"></script>
    <script type="text/javascript" src="JS/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="JS/vue-resource.min.js"></script>
    <script type="text/javascript" src="JS/Logic/Main/uptime.js"></script>
    </body>
</html>

三、js代码部分

var vue = new Vue({
    //模板ID
    el:'#vueapp',
    data: {
		//模拟模式 true=模拟,false=生产环境
		simulation:true,
        //机器集合
        machines: [
            { name: 'MC01', status: 'green', uptime: 80 },
            { name: 'MC02', status: 'red', uptime: 28 },
            { name: 'MC03', status: 'red', uptime: 34 },
            { name: 'MC34', status: 'red', uptime: 56 },
            { name: 'MC35', status: 'green', uptime: 89 },
            { name: 'MC56', status: 'green', uptime: 90 },
            { name: 'MC57', status: 'red', uptime: 34 },
            { name: 'MC23', status: 'red', uptime: 56 },
            { name: 'MC24', status: 'green', uptime: 66 },
        ],
		 
        //echart集合
        myCharts: [],
        //echart配置
        chartOption :{
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                show:false
            },
            series: [
                {
                    name: '',
                    type: 'gauge',
                    min: 0,
                    max: 100,
                    radius: '85%',
                    splitNumber: 5,//分隔段数
                    detail: { formatter: '{value}%' },
                    data: [{ value: 50, name: '' }],
                    axisLine: {
                        lineStyle: { color: [[0.2, 'green'], [0.8, 'gray'], [1, 'gray']] }
                    }
                }
            ]
        }
    },
    created: function () {
		if (this.$data.simulation){return;}
       // POST请求
       this.$http({
           url: 'api地址',
           method: 'POST',
           // 请求体重发送的数据
           data: {},
           // 设置请求头
           headers: {
               'Content-Type': 'application/json'
           }
       }).then(function (res) { 
			// 请求成功回调
			this.$data.machines=res;          
       }, function (res) {
           // 请求失败回调
		   console.log(res);
       });
    },
    methods: {
        initChart: function (machine) {//初始化echarts方法
            this.$data.machines[machine.name] = echarts.init(document.getElementById("chart_" + machine.name));
            this.$data.chartOption.series[0].data[0].value = machine.uptime;
            this.$data.machines[machine.name].setOption(this.$data.chartOption, true);
        }
    },
    mounted: function () {//初始化echarts,必须div初vue创建完成后执行,否则会出错
        this.$nextTick(function () {
            if (!this.$data.machines) { return; }for (var i = 0; i < this.$data.machines.length; i++) {
                this.initChart(this.$data.machines[i]);
            }
        });
    }
});

vue与echarts配合开发仪表盘

猜你喜欢