ECharts时间轴与颜色

最新推荐文章于 2024-05-31 18:04:07 发布

JonathanChan94

最新推荐文章于 2024-05-31 18:04:07 发布

阅读量7.4k

点赞数 1

分类专栏： js图表文章标签：实例 echarts 代码

本文链接：https://blog.csdn.net/Low_Key_Shulman/article/details/48845695

版权

最近在做两个网页，用到了ECharts和Highstock图表，确实比Chart.js更漂亮、更直观。
今天分享一下我用ECharts的一些心得。

1.用一条时间轴控制多个饼图

ECharts的官网给出的实例说到时间轴的基本上都是一条时间轴控制一个图表，例如下图
ECharts官网时间轴示例
但是有些时候我们可能需要用一个时间轴控制多个图，例如下图
时间轴控制多图表

其实大家多看看ECharts实例的代码，会发现做出这样一个效果并不难

首先直接用ECharts官网给出的标签式单文件引入饼图

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 

        var option = {
            title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:

最低0.47元/天解锁文章

JonathanChan94

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
ECharts时间轴与颜色

最近在做两个网页，用到了ECharts和Highstock图表，确实比Chart.js更漂亮、更直观。今天分享一下我用ECharts的一些心得。1.用一条时间轴控制多个饼图ECharts的官网给出的实例说到时间轴的基本上都是一条时间轴控制一个图表，例如下图但是有些时候我们可能需要用一个时间轴控制多个图，例如下图其实大家多看看ECharts实例的代码，会发现做出这样一个效果并不难首先直
复制链接

扫一扫