echarts

特点

1.数据的拆分与合并
2.对某个范围取值的展示
3.去处畸形数据,查看效果
4.简单的实现多图联动
5.配合时间轴使用
6.支持百万级的数据展示

小工具

百度图说
简单的修改类excle文档就可以生成统计图。
https://tushuo.baidu.com/wave/index#/gallery

入门

下载echarts.js文件,在html页面中引入,浏览器解析展示
js文件下载地址:https://www.7down.com/soft/214165.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的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, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

效果:
echarts_第1张图片

官网实例

https://www.echartsjs.com/examples/zh/editor.html?c=pie-custom
提供了许多的图表实例,操作简单,将参数进行修改即可,
索然无味。

主题在线构建

网址:https://www.echartsjs.com/theme-builder/

主题引入

网站编辑下载js文件

//引入
<script src="../theam/wonderland.js"></script>
//在使用时进行初始化
 var myChart = echarts.init(document.getElementById('main'),'wonderland');

你可能感兴趣的:(Echarts)