H5前端学习之路第2天--生成图表

第一种：Echarts  GitHub链接:https://github.com/apache/incubator-echarts

如果想要查看所有的属性，可查看：https://www.echartsjs.com/zh/cheat-sheet.html     ||    https://blog.csdn.net/qq_38382380/article/details/80436269

①制作表格 【需在github上下载文件，引入echarts.min.js文件(dist文件夹下，一定要先下载)】

<script src="echarts.min.js"></script>

<div id="main" style="width: 600px;height:400px;"></div>(宽高一定要设置，不然无法显示)

var myChart = echarts.init(document.getElementById('main'));

        var option = {

            title: {text: 'ECharts 入门示例'},

　　　  color:['red'],//柱状图柱子颜色(可以添加多个值)

            tooltip: {},

            legend: {

                data: ['销量']

     　　},

            xAxis: {

                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        };

        myChart.setOption(option);

第二种方法：ichartjs  github链接：https://github.com/wanghetommy/ichartjs

①制作表格

首先去github下载文件，引入ichart.1.2.1.min.js文件

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

其次html中写入

<div id="canvasDiv"></div>

然后 script 中

var data = [

        { name: 'H', value: 7, color: '#a5c2d5' },

        { name: 'E', value: 5, color: '#cbab4f' },

        { name: 'L', value: 12, color: '#76a871' }

 ];

$(function () {

        var chart = new iChart.Column2D({

            render: 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的ID

            data: data,//绑定数据

            title: 'Hello World\'s Height In Alphabet',//设置标题

            width: 800,//设置宽度，默认单位为px

            height: 400,//设置高度，默认单位为px

            shadow: true,//激活阴影

            shadow_color: '#c7c7c7',//设置阴影颜色

            coordinate: {//配置自定义坐标轴

                scale: [{//配置自定义值轴

                    position: 'left',//配置左值轴    

                    start_scale: 0,//设置开始刻度为0

                    end_scale: 26,//设置结束刻度为26

                    scale_space: 2,//设置刻度间距

                    listeners: {//配置事件

                        parseText: function (t, x, y) {//设置解析值轴文本

                            return { text: t + " cm" }

                        }

                    }

                }]

            }

        });

        //调用绘图方法开始绘图

        chart.draw();

    });