echarts学习笔记

最新推荐文章于 2022-04-02 16:56:12 发布

yuanliy

最新推荐文章于 2022-04-02 16:56:12 发布

阅读量626

点赞数 1

文章标签： echarts

本文链接：https://blog.csdn.net/a432qbc/article/details/117530310

版权

本文详细记录了使用Echarts进行异步数据加载的实现过程，探讨了如何让Echarts图表完美适应移动端展示，并介绍了Echarts的事件处理和动态排序柱形图的创建方法。

摘要由CSDN通过智能技术生成

异步数据加载

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
   
    title: {
   
        text: '异步数据加载示例'
    },
    tooltip: {
   },
    legend: {
   
        data:['销量']
    },
    xAxis: {
   
        data: []
    },
    yAxis: {
   },
    series: [{
   
        name: '销量',
        type: 'bar',
        data: []
    }]
});

// 异步加载数据
$.get('data.json').done(function (data) {
   
    // 填入数据
    myChart.setOption({
   
        xAxis: {
   
            data: data.categories
        },
        series: [{
   
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

完成代码

import * as echarts from 'echarts';

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

function fetchData(cb) {
   
    // 通过 setTimeout 模拟异步加载
    setTimeout(function () {
   
        cb({
   
            categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            data: [5, 20, 36, 10, 10, 20]
        });
    }, 1000);
}

// 初始 option
option = {
   
    title: {
   
        text: '异步数据加载示例'
    },
    tooltip: {
   },
    legend: {
   
        data:['销量']
    },
    xAxis: {
   
        data: []
    },
    yAxis: {
   },
    series: [{
   
        name: '销量',
        type: 'bar',
        data: []
    }]
};

fetchData(function (data) {
   
    myChart.setOption({
   
        xAxis: {
   
            data: data.categories
        },
        series: [{
   
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data