echarts图表使用

<div carousel-item id="LAY-index-pagethree">
	<div>
	   <i class="layui-icon layui-icon-loading1 layadmin-loading"></i>
	</div>
</div>

<div carousel-item id="LAY-index-pagetwo">
	<div>
	   <i class="layui-icon layui-icon-loading1 layadmin-loading"></i>
	</div>
</div>


<!-- 图表 -->
https://www.bootcdn.cn/echarts/
<script type="text/javascript" src="__TMPL__/public/assets/js/echarts.js"></script>
<!-- 主题 -->
下载地址:http://echarts.baidu.com/download-theme.html
<script type="text/javascript" src="__TMPL__/public/assets/js/macarons.js"></script>
<!-- 地图文件 -->
https://github.com/Luna829/incubator-echarts/blob/master/map/js/china.js
<script type="text/javascript" src="__TMPL__/public/assets/js/china.js"></script>

<!-- 地图 -->
<script type="text/javascript">
    var echartsApp = [],
        options = [{
            title: {
                text: '粉丝分布',
                subtext: '不完全统计'
            },
            tooltip: {
                trigger: 'item'
            },
            dataRange: {
                orient: 'horizontal',
                min: 0,
                max: 60000,
                text: ['高', '低'],
                splitNumber: 0
            },
            series: [{
                name: '粉丝分布',
                type: 'map',
                mapType: 'china',
                selectedMode: 'multiple',
                itemStyle: {
                    normal: { label: { show: true } },
                    emphasis: { label: { show: true } }
                },
                data: [
                    { name: '西藏', value: 60 },
                    { name: '青海', value: 167 },
                    { name: '宁夏', value: 210 },
                    { name: '海南', value: 252 },
                    { name: '甘肃', value: 502 },
                    { name: '贵州', value: 570 },
                    { name: '新疆', value: 661 },
                    { name: '云南', value: 8890 },
                    { name: '重庆', value: 10010 },
                    { name: '吉林', value: 5056 },
                    { name: '山西', value: 2123 },
                    { name: '天津', value: 9130 },
                    { name: '江西', value: 10170 },
                    { name: '广西', value: 6172 },
                    { name: '陕西', value: 9251 },
                    { name: '黑龙江', value: 5125 },
                    { name: '内蒙古', value: 1435 },
                    { name: '安徽', value: 9530 },
                    { name: '北京', value: 51919 },
                    { name: '福建', value: 3756 },
                    { name: '上海', value: 59190 },
                    { name: '湖北', value: 37109 },
                    { name: '湖南', value: 8966 },
                    { name: '四川', value: 31020 },
                    { name: '辽宁', value: 7222 },
                    { name: '河北', value: 3451 },
                    { name: '河南', value: 9693 },
                    { name: '浙江', value: 62310 },
                    { name: '山东', value: 39231 },
                    { name: '江苏', value: 35911 },
                    { name: '广东', value: 55891 }
                ]
            }]
        }],
        elemDataView = $('#LAY-index-pagethree').children('div'),
        renderDataView = function (index) {
            echartsApp[index] = echarts.init(elemDataView[index], 'macarons');
            echartsApp[index].setOption(options[index]);
            window.onresize = echartsApp[index].resize;
        };
    //没找到DOM,终止执行
    // if (!elemDataView[0]) return 0;

    renderDataView(0);
</script>

<!-- 访问量 -->
<script type="text/javascript">
    var echartsApp = [],
        options = [{
            tooltip: {
                trigger: 'axis'
            },
            calculable: true,
            legend: {
                data: ['访问量', '下载量', '平均访问量']
            },

            xAxis: [{
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }],
            yAxis: [{
                type: 'value',
                name: '访问量',
                axisLabel: {
                    formatter: '{value} 万'
                }
            },
            {
                type: 'value',
                name: '下载量',
                axisLabel: {
                    formatter: '{value} 万'
                }
            }
            ],
            series: [{
                name: '访问量',
                type: 'line',
                data: [900, 850, 950, 1000, 1100, 1050, 1000, 1150, 1250, 1370, 1250, 1100]
            },
            {
                name: '下载量',
                type: 'line',
                yAxisIndex: 1,
                data: [850, 850, 800, 950, 1000, 950, 950, 1150, 1100, 1240, 1000, 950]
            },
            {
                name: '平均访问量',
                type: 'line',
                data: [870, 850, 850, 950, 1050, 1000, 980, 1150, 1000, 1300, 1150, 1000]
            }
            ]
        }],
        elemDataView = $('#LAY-index-pagetwo').children('div'),
        renderDataView = function (index) {
            echartsApp[index] = echarts.init(elemDataView[index], 'macarons');
            echartsApp[index].setOption(options[index]);
            window.onresize = echartsApp[index].resize;
        };
    //没找到DOM,终止执行
    // if (!elemDataView[0]) return;
    renderDataView(0);
</script>

发布了65 篇原创文章 · 获赞 20 · 访问量 2081

猜你喜欢

转载自blog.csdn.net/weixin_43993175/article/details/104393047