使用echarts开发电子屏数据展示页面

背景

　　之前的项目因为要顾及体量问题，选用了highchart，没用上echarts；这次因为是本地部署电子屏幕的展示页，不需要考虑体量大小，直接用上了echarts；用起来觉得非常不错，特别是地图上非常炫酷的飞机飞行动画，吊炸天了。美中不足的地方是x轴上文字展示部分，想加些个性化的icon不支持，柱状图每条柱想用不同的颜色也不支持，那只能让设计师妥协了，呵呵！

快速浏览更多在线 Demo

想查看源代码，可以自行F12，或在github中直接查看源码，或者欢迎直接留言。

一、地图的实现

注意要先引入地图依赖数据china.js或者异步请求china.json文件，其他代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

//地图
$(function () {
 
    var geoCoordMap = {
        '上海': [121.4648, 31.2891],
        '东莞': [113.8953, 22.901],
        '东营': [118.7073, 37.5513],
        '中山': [113.4229, 22.478],
        '临汾': [111.4783, 36.1615],
        '临沂': [118.3118, 35.2936],
        '丹东': [124.541, 40.4242],
        '丽水': [119.5642, 28.1854],
        '乌鲁木齐': [87.9236, 43.5883],
        '佛山': [112.8955, 23.1097],
        '保定': [115.0488, 39.0948],
        '兰州': [103.5901, 36.3043],
        '包头': [110.3467, 41.4899],
        '北京': [116.4551, 40.2539],
        '北海': [109.314, 21.6211],
        '南京': [118.8062, 31.9208],
        '南宁': [108.479, 23.1152],
        '南昌': [116.0046, 28.6633],
        '南通': [121.1023, 32.1625],
        '厦门': [118.1689, 24.6478],
        '台州': [121.1353, 28.6688],
        '合肥': [117.29, 32.0581],
        '呼和浩特': [111.4124, 40.4901],
        '咸阳': [108.4131, 34.8706],
        '哈尔滨': [127.9688, 45.368],
        '唐山': [118.4766, 39.6826],
        '嘉兴': [120.9155, 30.6354],
        '大同': [113.7854, 39.8035],
        '大连': [122.2229, 39.4409],
        '天津': [117.4219, 39.4189],
        '太原': [112.3352, 37.9413],
        '威海': [121.9482, 37.1393],
        '宁波': [121.5967, 29.6466],
        '宝鸡': [107.1826, 34.3433],
        '宿迁': [118.5535, 33.7775],
        '常州': [119.4543, 31.5582],
        '广州': [113.5107, 23.2196],
        '廊坊': [116.521, 39.0509],
        '延安': [109.1052, 36.4252],
        '张家口': [115.1477, 40.8527],
        '徐州': [117.5208, 34.3268],
        '德州': [116.6858, 37.2107],
        '惠州': [114.6204, 23.1647],
        '成都': [103.9526, 30.7617],
        '扬州': [119.4653, 32.8162],
        '承德': [117.5757, 41.4075],
        '拉萨': [91.1865, 30.1465],
        '无锡': [120.3442, 31.5527],
        '日照': [119.2786, 35.5023],
        '昆明': [102.9199, 25.4663],
        '杭州': [119.5313, 29.8773],
        '枣庄': [117.323, 34.8926],
        '柳州': [109.3799, 24.9774],
        '株洲': [113.5327, 27.0319],
        '武汉': [114.3896, 30.6628],
        '汕头': [117.1692, 23.3405],
        '江门': [112.6318, 22.1484],
        '沈阳': [123.1238, 42.1216],
        '沧州': [116.8286, 38.2104],
        '河源': [114.917, 23.9722],
        '泉州': [118.3228, 25.1147],
        '泰安': [117.0264, 36.0516],
        '泰州': [120.0586, 32.5525],
        '济南': [117.1582, 36.8701],
        '济宁': [116.8286, 35.3375],
        '海口': [110.3893, 19.8516],
        '淄博': [118.0371, 36.6064],
        '淮安': [118.927, 33.4039],
        '深圳': [114.5435, 22.5439],
        '清远': [112.9175, 24.3292],
        '温州': [120.498, 27.8119],
        '渭南': [109.7864, 35.0299],
        '湖州': [119.8608, 30.7782],
        '湘潭': [112.5439, 27.7075],
        '滨州': [117.8174, 37.4963],
        '潍坊': [119.0918, 36.524],
        '烟台': [120.7397, 37.5128],
        '玉溪': [101.9312, 23.8898],
        '珠海': [113.7305, 22.1155],
        '盐城': [120.2234, 33.5577],
        '盘锦': [121.9482, 41.0449],
        '石家庄': [114.4995, 38.1006],
        '福州': [119.4543, 25.9222],
        '秦皇岛': [119.2126, 40.0232],
        '绍兴': [120.564, 29.7565],
        '聊城': [115.9167, 36.4032],
        '肇庆': [112.1265, 23.5822],
        '舟山': [122.2559, 30.2234],
        '苏州': [120.6519, 31.3989],
        '莱芜': [117.6526, 36.2714],
        '菏泽': [115.6201, 35.2057],
        '营口': [122.4316, 40.4297],
        '葫芦岛': [120.1575, 40.578],
        '衡水': [115.8838, 37.7161],
        '衢州': [118.6853, 28.8666],
        '西宁': [101.4038, 36.8207],
        '西安': [109.1162, 34.2004],
        '贵阳': [106.6992, 26.7682],
        '连云港': [119.1248, 34.552],
        '邢台': [114.8071, 37.2821],
        '邯郸': [114.4775, 36.535],
        '郑州': [113.4668, 34.6234],
        '鄂尔多斯': [108.9734, 39.2487],
        '重庆': [107.7539, 30.1904],
        '金华': [120.0037, 29.1028],
        '铜川': [109.0393, 35.1947],
        '银川': [106.3586, 38.1775],
        '镇江': [119.4763, 31.9702],
        '长春': [125.8154, 44.2584],
        '长沙': [113.0823, 28.2568],
        '长治': [112.8625, 36.4746],
        '阳泉': [113.4778, 38.0951],
        '青岛': [120.4651, 36.3373],
        '韶关': [113.7964, 24.7028]
    };
 
    var GZData = [
        [{ name: '广州' }, { name: '广州', value: 95 }],
        [{ name: '广州' }, { name: '太原', value: 90 }],
        [{ name: '广州' }, { name: '长春', value: 80 }],
        [{ name: '广州' }, { name: '重庆', value: 70 }],
        [{ name: '广州' }, { name: '西安', value: 60 }],
        [{ name: '广州' }, { name: '成都', value: 50 }],
        [{ name: '广州' }, { name: '上海', value: 160 }],
        [{ name: '广州' }, { name: '北京', value: 100 }],
        [{ name: '广州' }, { name: '北海', value: 20 }],
        [{ name: '广州' }, { name: '海口', value: 10 }]
    ];
 
    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
 
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord]
                });
            }
        }
        return res;
    };
 
    // genOption
    function genOption(GZData) {
        var color = ['#f4e925'];//点黄
        var series = [];
        [['广州', GZData]].forEach(function (item, i) {
            series.push({
                name: item[0] + ' Top10',
                type: 'lines',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: '#fff',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: item[0] + ' Top10',
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: item[0] + ' Top10',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });
 
        return {
            tooltip: {
                trigger: 'item'
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#004b94',//地图颜色
                        borderColor: '#333'//地图边色
                    },
                    emphasis: {
                        areaColor: '#0c2970'//地图mouse over颜色
                    }
                }
            },
            series: series
        };
    }
    // 使用刚指定的配置项和数据显示图表。
    var dMapChart = echarts.init(document.getElementById('d_map'));
    var option = genOption(GZData);
    dMapChart.setOption(option);
    // 基于准备好的dom，初始化echarts实例
    setInterval(function () {
        dMapChart.dispose();
        $("#d_map").html("");
        dMapChart = echarts.init(document.getElementById('d_map'));
        dMapChart.setOption(option);
    }, 5000);
});

二、会员总数变化实现

这里用了比较流行的css3动画库animate.css中的flipInX翻页效果来展示数据变化，代码如下：

//模拟读取并修改显示
var _oldVal = $("#member_count").attr("data-value");
setInterval(function () {
    var newVal = $("#member_count").attr("data-value"),
        oStr = _oldVal.toString(),
        nStr = newVal.toString();
    if (_oldVal != newVal) {
        _oldVal = newVal;
        var oCharArr = oStr.split(""),
            nCharArr = nStr.split("");
        if (oStr.length == nStr.length) {
            for (var i in oCharArr) {
                if (oCharArr[i] != nCharArr[i]) {
                    var $img = $("#member_count").find(".no img:eq(" + i + ")"),
                        src = $img.attr("src");
                    $img.attr("src", src.replace(oCharArr[i] + ".png", nCharArr[i] + ".png")).addClass("animated flipInX").one('webkitAnimationEnd mozAnimationEnd animationend', function () {
                        $(this).attr("class", "");
                    });
                }
            }
        } else {
            var imgGapNo = nStr.length - oStr.length;
            var _img = $("#member_count").find(".no img:eq(0)"),
                _no = $("#member_count").find(".no");
            for (var i = 0; i < imgGapNo; i++) {
                _no.append(_img.get(0).outerHTML);
            }
            for (var j in nCharArr) {
                var $img = $("#member_count").find(".no img:eq(" + j + ")"),
                    src = $img.attr("src");
                $img.attr("src", src.replace(/\d{1}.png/, nCharArr[j] + ".png")).addClass("animated flipInX").one('webkitAnimationEnd mozAnimationEnd animationend', function () {
                    $(this).attr("class", "");
                });
            }
        }
    }
}, 5000);

在线Demo >　　

三、会员年龄分布

代码如下：

// 图一、按年龄显示销售数据及客户数
var salesData = [10000, 10500, 10700, 25000, 11200, 9175, 8850],
    customersQtyData = [100, 105, 107, 150, 200, 175, 50];
function genAgeOption(salesData, customersQtyData) {
    return {
        color: ['#dedd74', '#4fc0f5'],
 
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            feature: {
                dataView: { show: false, readOnly: false },
                magicType: { show: false, type: ['line', 'bar'] },
                restore: { show: false },
                saveAsImage: { show: false }
            }
        },
        grid: {
            x: 60,
            x2: 60
        },
        legend: {
            data: ['客户数'],
            top: 'bottom',
            left: 'right',
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: [
            {
                axisLabel: {
                    rotate: 60,
                    interval: 0
                },
                type: 'category',
                data: ['1-20岁', '21-26岁', '27-32岁', '33-40岁', '41-50岁', '51-60岁', '61岁以上'],
                axisLine: {
                    lineStyle: {
                        color: '#95a7c5'//设置x轴颜色
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '累计销售额(元)',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#95a7c5'//设置图形左侧颜色
                    }
                },
                splitLine: { show: false }
            },
            {
                type: 'value',
                name: '客户数',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#95a7c5'//设置图形右侧颜色
                    }
                },
                splitLine: { show: false }
            }
        ],
        series: [
            {
                name: '累计销售额(元)',
                type: 'line',
                smooth: true,
                data: salesData
            },
            {
                name: '客户数',
                type: 'bar',
                yAxisIndex: 1,
                data: customersQtyData
            }
        ]
    }
}
var ageOption = genAgeOption(salesData, customersQtyData);
var ageChart = echarts.init(document.getElementById('chart_by_age'));
ageChart.setOption(ageOption);
// 基于准备好的dom，初始化echarts实例
setInterval(function () {
    ageChart.dispose();
    $("#chart_by_age").html("");
    ageChart = echarts.init(document.getElementById('chart_by_age'));
    ageChart.setOption(ageOption);
}, 22000);

四、会员性别分布

代码如下：

// 图二、按性别显示销售数据及客户数
var salesDataByGender = [1000000, 2500000],
    customersQtyDataByGender = [100000, 250000];
function genGenderOption(salesData, customersQtyData) {
    return {
        color: ['#dedd74', '#4fc0f5'],
 
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            feature: {
                dataView: { show: false, readOnly: false },
                magicType: { show: false, type: ['line', 'bar'] },
                restore: { show: false },
                saveAsImage: { show: false }
            }
        },
        grid: {
            x: 100,
            x2: 100
        },
        legend: {
            data: ['累计销售额(元)'],
            top: 'bottom',
            left: 'left',
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: [
            {
                axisLabel: {
                    interval: 0
                },
                type: 'category',
                data: ['男', '女'],
                axisLine: {
                    lineStyle: {
                        color: '#95a7c5'//设置x轴颜色
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '累计销售额(元)',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#95a7c5'//设置图形左侧颜色
                    }
                },
                splitLine: { show: false }
            },
            {
                type: 'value',
                name: '客户数',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#95a7c5'//设置图形右侧颜色
                    }
                },
                splitLine: { show: false }
            }
        ],
        series: [
            {
                name: '累计销售额(元)',
                type: 'line',
                smooth: true,
                data: salesData
            },
            {
                name: '客户数',
                type: 'bar',
                yAxisIndex: 1,
                data: customersQtyData
            }
        ]
    };
}
var genderOption = genGenderOption(salesDataByGender, customersQtyDataByGender);
var genderChart = echarts.init(document.getElementById('chart_by_gender'));
genderChart.setOption(genderOption);
// 基于准备好的dom，初始化echarts实例
setInterval(function () {
    genderChart.dispose();
    $("#chart_by_gender").html("");
    genderChart = echarts.init(document.getElementById('chart_by_gender'));
    genderChart.setOption(genderOption);
}, 17000);

五、月每端销售数据

代码如下：

// 图一、按客户端类型显示销售笔数及销售额
var orderCount = [121, 312, 55],
    salesData = [26541, 60004, 10242];
function getChannelBarOption(orderCount, salesData) {
    return {
        color: ['#dedd74', '#4fc0f5'],
 
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            feature: {
                dataView: { show: false, readOnly: false },
                magicType: { show: false, type: ['line', 'bar'] },
                restore: { show: false },
                saveAsImage: { show: false }
            }
        },
        grid: {
            x: 60,
            x2: 60
        },
        legend: {
            data: ['销售额','销售笔数'],
            top: 'bottom',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: [
            {
                axisLabel: {
                    interval: 0
                },
                type: 'category',
                data: ['微信端', 'APP端', 'PC端'],
                axisLine: {
                    lineStyle: {
                        color: '#95a7c5'//设置x轴颜色
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '销售笔数',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#95a7c5'//设置图形左侧颜色
                    }
                },
                splitLine: { show: false }
            },
            {
                type: 'value',
                name: '销售额',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#95a7c5'//设置图形右侧颜色
                    }
                },
                splitLine: { show: false }
            }
        ],
        series: [
            {
                name: '销售笔数',
                type: 'line',
                smooth: true,
                data: orderCount
            },
            {
                name: '销售额',
                type: 'bar',
                yAxisIndex: 1,
                data: salesData
            }
        ]
    };
}
var channelBarOption = getChannelBarOption(orderCount, salesData);
var chanelBarChart = echarts.init(document.getElementById('channel_bar'));
chanelBarChart.setOption(channelBarOption);
// 基于准备好的dom，初始化echarts实例
setInterval(function () {
    chanelBarChart.dispose();
    $("#channel_bar").html("");
    chanelBarChart = echarts.init(document.getElementById('channel_bar'));
    chanelBarChart.setOption(channelBarOption);
}, 25000);

六、月每端销售数据占比

代码如下：

// 图二、饼图，按客户端类型显示销售额
function genChannelPieOption(salesData) {
    return {
        color: ['#6f85ff', '#66ffff', '#4fc0f5'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
 
            {
                name: '销售额',
                type:'pie',
                radius: ['40%', '55%'],
 
                data:[
                    { value: salesData[0], name: '微信端' },
                    { value: salesData[1], name: 'APP端' },
                    { value: salesData[2], name: 'PC端' },
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{d}%\n\n{b} ',
                            textStyle: {
                                fontSize: 18,
                                fontWeight: 'bold'
                            },
                        },
                        labelLine: { show: true }
                    }
                }
            }
        ]
    };
}
var channelPieOption = genChannelPieOption(salesData);
var chanelPieChart = echarts.init(document.getElementById('channel_pie'));
chanelPieChart.setOption(channelPieOption);
// 基于准备好的dom，初始化echarts实例
setInterval(function () {
    chanelPieChart.dispose();
    $("#channel_pie").html("");
    chanelPieChart = echarts.init(document.getElementById('channel_pie'));
    chanelPieChart.setOption(channelPieOption);
}, 21000);

七、商品每日销售数据

代码如下：

//商品日销售趋势
$(function () {
    var dateArr = ['06.12', '06.13', '06.14', '06.15', '06.16', '06.17', '06.18', '06.19', '06.20', '06.21', '06.22', '06.23', '06.24', '06.25', '06.26'],
        orderCount = [121, 130, 140, 160, 312, 250, 220, 160, 100, 121, 160, 55, 121, 312, 55],
        salesData = [26541, 24541, 22541, 21541, 19541, 18541, 26541, 36541, 46541, 56541, 60004, 46541, 56541, 60004, 10242];
    function getDailyBarOption(dateArr, orderCount, salesData) {
        return {
            color: ['#dedd74', '#4fc0f5'],
 
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    dataView: { show: false, readOnly: false },
                    magicType: { show: false, type: ['line', 'bar'] },
                    restore: { show: false },
                    saveAsImage: { show: false }
                }
            },
            grid: {
                x: 60,
                x2: 60
            },
            legend: {
                data: ['销售额','销售笔数'],
                top: 'bottom',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            xAxis: [
                {
                    axisLabel: {
                        interval: 0
                    },
                    type: 'category',
                    data: dateArr,
                    axisLine: {
                        lineStyle: {
                            color: '#95a7c5'//设置x轴颜色
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '销售笔数',
                    min: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#95a7c5'//设置图形左侧颜色
                        }
                    },
                    splitLine: { show: false }
                },
                {
                    type: 'value',
                    name: '销售额',
                    min: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#95a7c5'//设置图形右侧颜色
                        }
                    },
                    splitLine: { show: false }
                }
            ],
            series: [
                {
                    name: '销售笔数',
                    type: 'line',
                    smooth: true,
                    data: orderCount
                },
                {
                    name: '销售额',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: salesData
                }
            ]
        };
    }
    var dailyBarOption = getDailyBarOption(dateArr,orderCount, salesData);
    var dailyBarChart = echarts.init(document.getElementById('daily_sales'));
    dailyBarChart.setOption(dailyBarOption);
    // 基于准备好的dom，初始化echarts实例
    setInterval(function () {
        dailyBarChart.dispose();
        $("#daily_sales").html("");
        dailyBarChart = echarts.init(document.getElementById('daily_sales'));
        dailyBarChart.setOption(dailyBarOption);
    }, 20000);
});

八、商品月销售趋势

代码如下：

//商品月销售趋势
$(function () {
    var dateArr = ['2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
        orderCount = [121, 130, 140, 160, 312, 250, 220, 160, 100, 121, 160, 55],
        salesData = [26541, 24541, 22541, 21541, 19541, 18541, 26541, 36541, 46541, 56541, 60004, 46541];
    function getMonthlyBarOption(dateArr, orderCount, salesData) {
        return {
            color: ['#dedd74', '#4fc0f5'],
 
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    dataView: { show: false, readOnly: false },
                    magicType: { show: false, type: ['line', 'bar'] },
                    restore: { show: false },
                    saveAsImage: { show: false }
                }
            },
            grid: {
                x: 60,
                x2: 60
            },
            legend: {
                data: ['销售额', '销售笔数'],
                top: 'bottom',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            xAxis: [
                {
                    axisLabel: {
                        interval: 0
                    },
                    type: 'category',
                    data: dateArr,
                    axisLine: {
                        lineStyle: {
                            color: '#95a7c5'//设置x轴颜色
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '销售笔数',
                    min: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#95a7c5'//设置图形左侧颜色
                        }
                    },
                    splitLine: { show: false }
                },
                {
                    type: 'value',
                    name: '销售额',
                    min: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#95a7c5'//设置图形右侧颜色
                        }
                    },
                    splitLine: { show: false }
                }
            ],
            series: [
                {
                    name: '销售笔数',
                    type: 'line',
                    smooth: true,
                    data: orderCount
                },
                {
                    name: '销售额',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: salesData
                }
            ]
        };
    }
    var monthlyBarOption = getMonthlyBarOption(dateArr, orderCount, salesData);
    var monthlyBarChart = echarts.init(document.getElementById('monthly_sales'));
    monthlyBarChart.setOption(monthlyBarOption);
    // 基于准备好的dom，初始化echarts实例
    setInterval(function () {
        monthlyBarChart.dispose();
        $("#monthly_sales").html("");
        monthlyBarChart = echarts.init(document.getElementById('monthly_sales'));
        monthlyBarChart.setOption(monthlyBarOption);
    }, 25000);
});

九、月商品销售Top10

代码如下：

//商品月销售Top 10商品
$(function () {
    var salesData = [{
        value: 26541,
        name: '美国Gerber嘉宝 1段大米米粉 227g 宝宝辅食'
    }, {
        value: 36541,
        name: '日本utena佑天兰胶原蛋白黄金啫喱果冻面膜 3片...'
    }, {
        value: 16541,
        name: '荷兰Hero Baby美素白金版奶粉3段 700g'
    }, {
        value: 46541,
        name: '澳大利亚Gerber嘉宝 1段大米米粉 227g 宝宝辅食'
    }, {
        value: 66541,
        name: '法国Hero Baby美素白金版奶粉3段 700g'
    }, {
        value: 26541,
        name: '德国Gerber嘉宝 1段大米米粉 227g 宝宝辅食'
    }, {
        value: 36541,
        name: '意太利Gerber嘉宝 1段大米米粉 227g 宝宝辅食'
    }, {
        value: 76541,
        name: '加拿大Gerber嘉宝 1段大米米粉 227g 宝宝辅食'
    }, {
        value: 96541,
        name: '香港Gerber嘉宝 1段大米米粉 227g 宝宝辅食'
    }, {
        value: 56541,
        name: '澳门Gerber嘉宝 1段大米米粉 227g 宝宝辅食'
    }
    ];
    function genMonthlyGoodsOption(salesData) {
        var total = 0;
        for (var i in salesData) {
            total += salesData[i].value;
        }
        return {
            color: ['#6f85ff', '#66ffff', '#4fc0f5', '#6f85ff', '#66ffff', '#4fc0f5', '#6f85ff', '#66ffff', '#4fc0f5', '#66ffff'],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
 
                {
                    name: '销售额',
                    type: 'pie',
                    radius: ['40%', '55%'],
 
                    data: salesData,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: function (a) {
                                    var name = '';
                                    if (a.name.length > 20) {
                                        name = a.name.substr(0, 20) + '\n' + a.name.substr(20);
                                    } else {
                                        name = a.name;
                                    }
                                    return ((a.value / total) * 100).toFixed(2) + '%' + '\n' + name;
                                },
                                textStyle: {
                                    fontSize: 18,
                                    fontWeight: 'bold'
                                },
                            },
                            labelLine: { show: true }
                        }
                    }
                }
            ]
        };
    }
    var monthlyGoodsOption = genMonthlyGoodsOption(salesData);
    var monthlyGoodsChart = echarts.init(document.getElementById('top10_monthly_goods'));
    monthlyGoodsChart.setOption(monthlyGoodsOption);
    // 基于准备好的dom，初始化echarts实例
    setInterval(function () {
        monthlyGoodsChart.dispose();
        $("#top10_monthly_goods").html("");
        monthlyGoodsChart = echarts.init(document.getElementById('top10_monthly_goods'));
        monthlyGoodsChart.setOption(monthlyGoodsOption);
    }, 22000);
});

十、月销售品类Top5

代码如下：

//商品月销售Top 10商品
$(function () {
    var salesData = [{
        value: 26541,
        name: '电商－家居'
    }, {
        value: 36541,
        name: '电商－美妆护肤'
    }, {
        value: 16541,
        name: '电商－进口食品'
    }, {
        value: 46541,
        name: '电商－母婴'
    }, {
        value: 66541,
        name: '电商－保健品'
    }];
    function genMonthlyChannelOption(salesData) {
        var total = 0;
        for (var i in salesData) {
            total += salesData[i].value;
        }
        return {
            color: ['#6f85ff', '#66ffff', '#4fc0f5', '#6f85ff', '#66ffff'],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
 
                {
                    name: '销售额',
                    type: 'pie',
                    radius: ['40%', '55%'],
 
                    data: salesData,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: function (a) {
                                    var name = '';
                                    if (a.name.length > 20) {
                                        name = a.name.substr(0, 20) + '\n' + a.name.substr(20);
                                    } else {
                                        name = a.name;
                                    }
                                    return ((a.value / total) * 100).toFixed(2) + '%' + ' ' + name;
                                },
                                textStyle: {
                                    fontSize: 18,
                                    fontWeight: 'bold'
                                },
                            },
                            labelLine: { show: true }
                        }
                    }
                }
            ]
        };
    }
    var monthlyChannelOption = genMonthlyChannelOption(salesData);
    var monthlyChannelChart = echarts.init(document.getElementById('top10_monthly_channel'));
    monthlyChannelChart.setOption(monthlyChannelOption);
    // 基于准备好的dom，初始化echarts实例
    setInterval(function () {
        monthlyChannelChart.dispose();
        $("#top10_monthly_channel").html("");
        monthlyChannelChart = echarts.init(document.getElementById('top10_monthly_channel'));
        monthlyChannelChart.setOption(monthlyChannelOption);
    }, 24000);
});

posted @ 2016-07-22 11:00 Fast Mover 阅读(14522) 评论(10) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？

公告

关于邮件联系个

CSS 3
HTML5

Vue.js
React

小程序
开发

昵称： Fast Mover
园龄： 10年7个月
粉丝： 106
关注： 10

+加关注

2025年3月

日

一

二

三

四

五

六

Fast Mover

使用echarts开发电子屏数据展示页面

背景

快速浏览更多在线 Demo

一、地图的实现

二、会员总数变化实现

三、会员年龄分布

四、会员性别分布

五、月每端销售数据

六、月每端销售数据占比

七、商品每日销售数据

八、商品月销售趋势

九、月商品销售Top10

十、月销售品类Top5

公告

搜索

阅读排行榜

最新评论