Echarts使用

Echarts

Echarts介绍

  • D3.js是web端评价最高的JavaScript可视化工具库；

  • ECharts.js是百度开发一个开源JavaScript可视化工具库；

  • Highcharts.js是国外的一款可视化库，非商用免费，被许多国外大公司使用；

  • AntV是蚂蚁金服全新一代数据可视化解决方案；

  • Highcharts.js与ECarts.js是office和wps的关系。

翻译翻译

  • Echarts是一个js插件，用来做好看图表的；

  • 性能好，可流畅运行于移动端和pc端；

  • 兼容主流浏览器；

  • 提供很多常用图表，且可定制。

图表应用场景

公司销售业绩，与往年的数据相比较，一年来各个季度的数据比较，一周内每天的销售额度 柱状图或折线图

班级及格，不及格，良好，优秀的比例展示 扇形图（饼图）

除此以外，还有散点图，k线图等

ECharts安装

方式一 CDN

<script src='https://www.jsdelivr.com/package/npm/echarts'></script>

方式二 npm

npm i echarts
## 安装完毕后，如上引入即可。

Echarts使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    1.安装并引入echarts-->
    <script src="../node_modules/echarts/dist/echarts.min.js"></script>
    <style>
        #main {
            width: 100vw;
            height: 100vh
        }
    </style>
</head>
<body>
<!--2.准备容器,此容器必须设置宽度和高度-->
<div id="main"></div>
<script>
    // 3.初始化echarts实例对象
    const main = document.getElementById('main')
    const myChart = echarts.init(main)
​
    //    4.指定配置项和数据
    const option={
        xAxis:{
            type:'category',
            data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
        },
        yAxis:{
​
        },
        series:[{
            data:[123,246,358,425,522,955,24],
            type:'line'//bar
        }]
    }
//    5.将配置项设置给Echarts
    myChart.setOption(option)
</script>
</body>
</html>

Echarts概念

设置容器大小

在Echarts使用过程中，必须给容器设置宽高，推荐使用css去设置此样式。

浏览器窗口大小发生变化重启echarts

 window.onresize=function () {
        myChart.resize()
    }

通过监听页面的window.onresize事件，获取浏览器大小改变的事件，然后调用myChart.resize()方法来重置宽高。

设置主题（换皮肤）

ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式：

var chart = echarts.init(dom, 'dark');

如果上述黑暗主题不满足你的需求，还可以进入主题下载 - Apache ECharts下载其他内置theme，如果都不满足， 还可以自己定制，然后下载js文件，使用方法如下：

<script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
    ...
});
</script>
 

 

 

 

 

 

 

 

 

 

posted @   WANG_GUOLIANG  阅读(227)  评论(0)  编辑  收藏  举报
相关博文：
· html+css+js
· webpack
· Echarts
· Echarts
· Echarts学习笔记
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示