数据可视化(Echart)

柱状图、折线图、饼图等六种基本图表的特点及适用场合

  • 参考网址

  • 效果图

  • 源码

      <!DOCTYPE html>
    <html> <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    </head> <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div> <div id="main2" style="width: 600px;height:400px;left: 700px;top: 0px;position: absolute;"></div> <div id="main3" style="width: 600px;height:400px;left: 0px;top: 400px;position: absolute;"></div> <div id="main4" style="width: 600px;height:400px;left: 700px;top: 400px;position: absolute;"></div> <script type="text/javascript">
    //模拟后台传来的json
    var jsondata =
    '{"sales":[{"name":"衬衫","num":"70"},{"name":"羊毛衫","num":"27"},{"name":"裤子","num":"36"},{"name":"高跟鞋","num":"18"},{"name":"袜子","num":"85"},{"name":"棉袄","num":"105"}]}';
    var jsonobj = JSON.parse(jsondata); //获取json中的数值
    var dataName = [];
    var dataNum = [];
    var temp = jsonobj; //匿名函数解析json串中的数值,关键点
    (function() {
    for(var i = 0; i < temp.sales.length; i++) {
    dataName.push(temp.sales[i].name);
    dataNum.push(temp.sales[i].num);
    }
    })(); // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2')); //折线图
    var option = {
    title: {
    text: '衣物销量统计'
    },
    tooltip: {},
    legend: {
    data: ['销量']
    }, xAxis: {
    //x轴字体颜色
    /*axisLine: {
    lineStyle: {
    color: '#C50023'
    }
    },*/ data: dataName,
    },
    yAxis: [{
    //定义y轴最大与最小值
    min: 0,
    max: 120,
    type: 'value',
    name: '日销量(万)',
    splitNumber: 5
    }], series: [{ //折线上数字
    /* label: {
    normal: {
    show: true,
    position: 'top',
    formatter:100
    }
    },*/ // 折线颜色
    /*itemStyle: {
    normal: {
    //线上。的颜色
    color: '#33CCFF',
    lineStyle: {
    //线的颜色
    color: '#33CCFF'
    }
    }
    },*/ //顶上小图标名称
    name: '销量',
    type: 'line',
    data: dataNum, //平均值
    markLine: {
    data: [{
    type: 'average',
    name: '平均值'
    }]
    }, }]
    }; myChart.setOption(option); //柱状图
    // 指定图表的配置项和数据
    var option2 = {
    title: {
    text: '衣物销量统计'
    },
    tooltip: {},
    legend: {
    data: ['销量']
    },
    xAxis: {
    data: dataName,
    },
    yAxis: {
    type: 'value',
    name: '日销量(万)',
    splitNumber: 5
    },
    series: [{
    name: '销量',
    type: 'bar',
    //柱状宽度
    barWidth: 20,
    data: dataNum,
    }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2); //饼状图
    echarts.init(document.getElementById('main3')).setOption({
    title: {
    text: '衣物销量统计',
    subtext: '日销量(万)',
    x: 'center',
    //背景色
    //backgroundColor:'rgba(12,121,123,0.1)'
    },
    series: [{
    name: '详情',
    type: 'pie', //饼状图的大小
    //radius : '55%', center: ['50%', '60%'],
    data: (function() { //饼状图需要函数解析数字内的值
    var res = [];
    var len = dataName.length;
    while(len--) {
    res.push({
    name: dataName[len],
    value: dataNum[len]
    });
    }
    return res;
    })()
    }]
    }) echarts.init(document.getElementById('main4')).setOption({
    title: {
    text: '衣物销量统计'
    },
    tooltip: {},
    legend: {
    data: ['销量']
    },
    xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {
    type: 'value',
    name: '日销量(万)',
    min: 0,
    max: 4,
    axisLabel: {
    formatter: function(value) {
    var texts = [];
    if(value == 0) {
    texts.push('woo');
    } else if(value <= 1) {
    texts.push('好');
    } else if(value <= 2) {
    texts.push('很好');
    } else if(value <= 3) {
    texts.push('非常好');
    } else {
    texts.push('完美');
    }
    return texts; }
    }
    },
    series: [{
    name: '销量',
    type: 'bar',
    //柱状宽度
    //barWidth: 20,
    data: [1, 4, 2, 3, 2, 0]
    }]
    })
    </script>
    </body>
    </html>

数据可视化(Echart) :柱状图、折线图、饼图等六种基本图表的特点及适用场合的更多相关文章

  1. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  2. C# 绘制统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  3. Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  4. Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程

    Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...

  5. Python图表数据可视化Seaborn:2. 分类数据可视化-分类散点图|分布图(箱型图|小提琴图|LV图表)|统计图(柱状图|折线图)

    1. 分类数据可视化 - 分类散点图 stripplot( ) / swarmplot( ) sns.stripplot(x="day",y="total_bill&qu ...

  6. seaborn分类数据可视化:散点图|箱型图|小提琴图|lv图|柱状图|折线图

    一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...

  7. Python--matplotlib 绘图可视化练手--折线图/条形图

    最近学习matplotlib绘图可视化,感觉知识点比较多,边学习边记录. 对于数据可视化,个人建议Jupyter Notebook. 1.首先导包,设置环境 import pandas as pd i ...

  8. ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来

    ECharts 多个折线图动态获取json数据 效果图如下: 一.html部分 <p id="TwoLineChart" style="width:100%; he ...

  9. echarts在数据改变后,折线图并没有全部刷新

    在做一个BI项目的时候,图表需要区分国内和国外显示.当前用户所属企业具备国内外权限的时候,展示两条图表,当查看其他企业需要根据选中的企业所具备的权限改变图表.即刚开始显示两条折线图,更改选择条件并重新 ...

随机推荐

  1. \pset 、\x命令

    \pset命令用于设置输出的格式 \pset border 0:表示输出内容无边框.示例如下: \pset border 1:表示边框只在内部.示例如下: \pset border 2:表示内外都有边 ...

  2. (7)C++ 函数2

    一.内联函数 通常程序在调用函数时,程序会跳转到另一个地址上,意味着会多花开销.使用内联函数,编译器能够将函数调用替换成函数代码.这样会变得稍快一些 在函数原型的地方使用加了inline的函数定义 # ...

  3. 畜禽免疫系统使用LODOP打印

    <div class="btn_box"> <asp:Button ID="btnPrint" Text="预览并打印" ...

  4. java8 Date LocalDate LocaDateTime 互相转化

    java 8中 java.util.Date 类新增了两个方法,分别是from(Instant instant)和toInstant()方法 // Obtains an instance of Dat ...

  5. 第一周复习一 ( HTML表单form)

    form <from id="" name="" method="post/get" action="">& ...

  6. swoole安装异步reids

    /usr/local/php/bin/phpize ./configure --with-php-config=/usr/local/php/bin/php-config --enable-async ...

  7. Guava之controller中使用缓存cache

    之前介绍过的Guava这个工具包中有很多方便的用法,下面要使用它封装的Cache来实现功能. 示例: import com.google.common.cache.CacheBuilder; impo ...

  8. Codeforces A Mist of Florescence

    A Mist of Florescence 题目大意: 事先告诉你每种颜色分别有几个联通块,构造一个不超过 \(50*50\) 的矩形.用 \(A,B,C,D\) 四种颜色来对矩形进行涂色使它满足要求 ...

  9. Python之字典推导式

    推导式是个绝妙的东西,列表推导式一出,map.filter等函数黯然失色,自 Python2.7以后的版本,此特性扩展到了字典和集合身上,构建字典对象无需调用 dict 方法. bad numbers ...

  10. Node.js中的fs文件系统

    fs.stat 检测是文件还是目录 fs.mkdir 创建目录 fs.writeFile 创建写入文件 fs.appendFile 追加文件 fs.readFile 读取文件 fs.readdir 读 ...