zoukankan      html  css  js  c++  java
  • Echart 动态生成series数据

    要做成页面只传入数据,js生成图表,如下图

    下面是js代码

    var LineChart = function (ID, title, axisData,seriesData) {
        var myChart = echarts.init(document.getElementById(ID));
        var newData = [];
        var legendData = [];
        for (var i = 0; i < seriesData.length; i++) {
            var lineItem = new serLineItem();
            lineItem.name = seriesData[i].name;
            legendData.push(seriesData[i].name);
            lineItem.data = seriesData[i].data;
            newData.push(lineItem);
        }
        var option = {
            title: {
                text: title,
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legendData,
                bottom:0
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                       yAxisIndex: 'none'
                    },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: axisData
            },
            yAxis: {
                type: 'value'
            },
            series: newData
        };
        myChart.setOption(option);
    }
    
    var serLineItem = function () {
        return {
            name: '',
            type: 'line',
            data: []
        }
    }
    View Code

    前台页面调用

    引入相关的js文件

    $(document).ready(function () {

      var axisData= ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

    var seriesData = [{ name: '直接访问', data: [320, 302, 301, 334, 390, 330, 320] },
    {name: '邮件营销', data: [120, 132, 101, 134, 120, 230, 210]},
    {name: '联盟广告', data: [220, 182, 191, 234, 290, 330, 310]},
    {name: '视频广告', data: [150, 212, 201, 154, 190, 330, 410]},
    { name: '搜索引擎', data: [820, 832, 901, 934, 1290, 1330, 1320] }];

    LineChart('main', '访问', axisData, seriesData);

    }

      

  • 相关阅读:
    java获得两个日期之间的所有月份
    Java设计模式之观察者模式
    SpringMVC项目配置
    Java设计模式之策略模式
    Tomcat源码
    线程池
    java内存模型
    JVM内存结构 JVM的类加载机制
    java虚拟机-垃圾回收算法
    并发容器-ConcurrentHashMap,CopyOnWriteArrayList
  • 原文地址:https://www.cnblogs.com/ZJ199012/p/9104891.html
Copyright © 2011-2022 走看看