图表生成器 echarts

echarts官网有多种样式

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="application/javascript" src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
    <script type="text/javascript">
        //就绪函数
        $(function () {
            var company=[];
            var turnover=[];
                $.ajax({
                    type:"GET",
                    url:"${pageContext.request.contextPath}/collect/jsonList",
                    success:function (msg) {
                        $(msg.map.list).each(function (index,item) {
                            company.push(item.dacname)
                            turnover.push(item.daturnover)
                        });
                        var myChart = echarts.init(document.getElementById('main'));
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '各公司2018年销售金额'
                            },
                            tooltip: {},
                            legend: {
                                data:['营业额']
                            },
                            xAxis: {
                                data: company,
                            },
                            yAxis: {},
                            series: [{
                                name: '营业额',
                                type: 'bar',
                                data: turnover,
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        	// 加上这一句即可自适应页面宽度
					window.onresize = myChart.resize;
                    }
                })
        })