Echarts入门Demo

最新推荐文章于 2024-04-22 16:47:54 发布

YXB413

最新推荐文章于 2024-04-22 16:47:54 发布

阅读量992

点赞数 1

分类专栏： JavaScript html和css 文章标签： JavaScript Echarts 数据可视化

本文链接：https://blog.csdn.net/YXB413/article/details/83056354

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html和css

2 篇文章 0 订阅

订阅专栏

Echarts吸引我的不仅仅是它炫酷的效果，更重要的是它对于大体量数据的处理能力

（通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载（4.0+）的支持，你可以使用 WebSocket 或者对数据分块后加载，加载多少渲染多少！不需要漫长地等待所有数据加载完再进行绘制。）

以下是Echarts的第一个Demo，注释是我的个人理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EchartsDemo2</title>
</head>
<body>
  <div id="main" style="margin: auto;height: 400px;width: 600px"></div>


  <script src="echarts.min.js"></script>
<script>
    var mychart = echarts.init(document.getElementById("main"));
    var option = {//图表选项，包含图表实例任何可配置选项： 公共选项 ， 组件选项 ， 数据选项
        title:{//报表的标题
            text:'xx公司2018年营业额'
        },
        //提示框组件
        tooltip:{//坐标轴触发，说白了就是：当鼠标移上去时，会呈现出中间那条线
            //坐标轴触发，主要用于柱状图，折线图等
            trigger:'axis'
        },
        //图例
        legend:{
            data:['利润(万)']//这里data:['xxx'] 里面的值必须与series里面name:'xxxx'的值一致
        },
        //横轴
        xAxis:{
            data:["1月份","2月份","3月份","4月份","5月份","6月份","7月份","8月份","9月份","10月份"]
        },
        //纵轴
        yAxis:{},
        //系列列表。每个系列通过type决定自己的图表类型
        series:[{
            name:'利润(万)',
            //bar:柱状图  line：折线图
            type:'line',//图表的类型
            data:[150, 120, 136, 80, 120, 90,148,152,150,160]
        }]
    };

    mychart.setOption(option);
</script>
</body>
</html>

YXB413

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts入门Demo

Echarts吸引我的不仅仅是它炫酷的效果，更重要的是它对于大体量数据的处理能力（通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载（4.0+）的支持，你可以使用 WebSocket 或者对数据分块后...
复制链接

扫一扫