索鸟网

  1. 首页
  2. ECharts 快速入门教程

ECharts 快速入门教程


ECharts 快速入门教程
  • 基于准备好的 dom,初始化 echarts 实例:
var myChart = echarts.init(document.getElementById("main"));
  • 指定图表的配置项和数据:
var option = {
    title: {
        text: "ECharts 入门示例"
    },
    tooltip: {},
    legend: {
        data:["销量"]
    },
    xAxis: {
        data: ["衬衫", "雪纺衫", ,"高跟鞋"]
    },
    yAxis: {},
    series: [{
        name: "销量",
        type: "bar",
        data: [5, 36, 20]
    }]
};
  • 使用刚指定的配置项和数据显示图表:
myChart.setOption(option);
  • ECharts 中有一些通用的样式,如阴影、透明度、颜色、边框颜色、边框宽度等,这些样式一般都会在 series 的 itemStyle 里设置:
itemStyle: {
    normal: {
        shadowBlur: 200,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)"
    }
}
  • itemStyle 有 normalemphasis 两个选项,normal 选项是正常状态的样式,emphasis 是鼠标 hover 时候的高亮样式:
itemStyle: {
    emphasis: {
        shadowBlur: 200,
        shadowColor: "rgba(0, 0, 0, 0.5)"
    }
}
  • 要把整个主题改成深色主题,需要改 背景色 和 文本样式。

背景色全局 样式,所以,需要直接在 option 下设置 backgroundColor

setOption({
    backgroundColor: "#2c343c"
})

文本样式可以设置全局的 textStyle

setOption({
    textStyle: {
        color: "rgba(255, 255, 255, 0.3)"
    }
})

也可以在每个series分别设置,每个series的文本设置在 label.normal.textStyle

label: {
    normal: {
        textStyle: {
            color: "rgba(255, 255, 255, 0.3)"
        }
    }
}
  • 设置标签的视觉引导线 labelLine 的颜色(label 和 labelLine 也有 normal 和emphasis 两个状态):
labelLine: {
    normal: {
        lineStyle: {
            color: "rgba(255, 255, 255, 0.3)"
        }
    }
}
  • ECharts 中每项数据样式可以分别设置data下的数据项实现:
data: [{
    value: 400,
    name: "搜索引擎",
    itemStyle: {
        normal: {
            color: "#c23531"
        }
    }
}, ...]
  • ECharts 中实现异步数据的更新非常简单,在图表初始化后通过 jQuery 等工具异步获取数据后,在 setOption 填入数据和配置项即可。
    或者先设置完其它的不涉及数据的样式,显示一个空的直角坐标轴,然后获取数据后填入数据:
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: [{
            // 根据名字对应到相应的 series 
            name: "销量",
            data: data.data
        }]
    });
});
  • ECharts 默认提供了加载动画,只需要调用showLoading方法显示。数据加载完成后再调用hideLoading方法隐藏加载动画:
myChart.showLoading();
$.get("data.json").done(function (data) {
    myChart.hideLoading();
    myChart.setOption(option);
});
  • ECharts 提供了 Media Query『随着容器尺寸改变而自适应』,设置如下:
option = {
    baseOption: { // 初始显示
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },

    media: [ // 媒体查询
        {
            query: { // 这里写规则
                minWidth: 200,
                maxHeight: 300
            },
            option: { // 这里写此规则满足下的 option
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则
            option: {       // 第二个规则对应的 option
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则,表示『默认』
            option: {       // 即所有规则都不满足时,采纳这个 option
                legend: {...},
                ...
            }
        }
    ]
};
相关标签: JavaScript

来源地址:http://www.imooc.com/article/20157 版权归作者所有!

相关教程

  • Solr6 快速入门教程

    Solr6 快速入门教程 安装 环境要求 JDK1.8 下载Solr,本文试验时,使用的Solr6.6.0 开始安装 解压solr-6.6.0.zip cd solr-6.6.0\ 启动solr,run: bin\solr start -e cloud -noprompt D:\machine\solr\solr-6.6.0>bin\s
  • Redux入门教程(快速上手)

    典型的Web应用程序通常由共享数据的多个UI组件组成。通常,多个组件的任务是负责展示同一对象的不同属性。这个对象表示可随时更改的状态。在多个组件之间保持状态的一致性会是一场噩梦,特别是如果有多个通道用于更新同一个对象。 举个
  • echarts 配置

    HTML: <template> <div class="tendencyChart"> <HeaderNav :navList="navList" :parentPath="parentPath"></HeaderNav> <div class="nav">
  • echarts 使用心得

    echarts 使用心得 echarts 背景图片的使用 echarts 是使用canvas绘图的,所以放置在背景容器的css背景图片不会被显示出来,所以如果需要显示背景图片。可以使用{backgroundColor: HTMLDOM}设置,背景是一个dom元素。所以给这个dom设置背景就可以了。 为了方便起见,如果在容器的下方放置一个元素和容器使用一模
  • oracle 入门教程......

    1 连接用户 : connect system/**** @orcl as SYSDBA; 2 显示当前登录用户: show user; 3 解锁用户: alter user scott account unlock; 4 数据字典: dba_users user_users 所有用户; dba_tablespaces user_tablespaces
  • React-Redux 入门教程

    项目目录 整个项目目录分为图中所示: Redux分为{Action,Reducer,Store} 入口文件为App.jsx 项目效果 从图中可以看出整个组件可以分为3个组件,内部Counter组件,计算Count的Summary的组件,以及整个容器组件ControlPanel Content React Redux 事实上是两个独立的产品, 应用
  • PS入门教程

    一.窗口要点:1.如何同时观看几张图片:按住图片标题栏,拖拽即可; 2.如何对多张图片进行组合:将图片拖到另一张上即可; 3.如何对多张图片进行排列:【窗口】—【排列】—【平铺】/【浮动】、【缩放】等; 或在原始打开状态下,选择【排列文档工具】点击下拉箭头,选择需要的即可; 4.快捷键:shift+tab 控制调板的显示与否。 二、视图菜单 1.从标尺中可拉参考线到图片