一.简介

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，变成了免费开源。

二.使用

下载并引入EChart.js文件

<script src="js/echarts.min.js"></script>

准备一个具备大小的DOM容器来装生成的图表

<!-- 注意：这个盒子必须具备大小，生成的图表会放入这个容器内 -->
<div id="main" style="width: 600px;height:400px;"></div>

初始化echarts实例对象

var myChart = echarts.init(document.querySelector('.box'));

根据具体需求修改配置选项（option）

var option = {
         title: {
              text: 'ECharts 入门示例'
            },
          tooltip: {},
          legend: {
               data: ['销量']
            },
         xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

将配置项设置给echarts实例对象

myChart.setOption(option);

三.基本图标样式

常用样式
- bar柱状图
- line折线图
  加上smooth属性就变成了曲线图
  加上s areaStyle：“#f0”面积图
- pie饼状图
  加上 radius：[80，50]环形图
常用颜色
- 主题颜色
  - light
  - dark
  - 定制主题可前往官方网站定制自己喜欢的，然后下载导入即可使用
    网站地址：echarts.apache.org/zh/theme-bu…
- color调色盘
  - option.color：color: [“pink”, “#ff0”, “#f0f”, “#0ff”],
  - series.item.color
- itemStyle项的颜色
  - itemStyle:{color:“#00f” }
  - itemStyle:{normal:{color:“#93da6c”},emphasis:{color:“#bcff57”}}
label标签
- show：true是否显示
- position：”insideRight“位置
- formatter格式：formatter: “ {a}系列名 {b}数据名 {c}数值 {d}百分百”
- rich富文本
缓冲动画

var trends = data.data.trends.sort((a, b) => a.day - b.day);
    var echart = echarts.init(document.getElementById("container"),"dark");
    var option = {
        title: {
            text: "新冠肺炎趋势"
        },
        legend: {
            data: ["确诊病例"]
        },
        tooltip: {},
        yAxis: {},
        xAxis: {
            //只显示前20条数据
            data: trends.slice(0, 20).map(item => String(item.day).slice(-4))
        },
        series: [
            {
                name: "累计确诊",
                type: "bar",
                data: trends.slice(0, 20).map(item => item.sure_cnt)
            }
        ],
        //每个执行延迟的时间（idx就是下标随着下标的增大，延迟会长）
        //idx就是下标
        animationDelay: function (idx) {
            // 越往后的数据延迟越大
            return idx * 100;
        },
        //idx就是下标
        animationDuration: function (idx) {
            // 越往后的数据时长越大
            return idx * 100;
        },
        //弹性的方式出现动画
        animationEasing:"bounceInOut"
    };
    //每3秒执行一次动画
    var id = setInterval(move, 3000);
    function move() {
        //删除第一个数据
        var first = trends.shift();
        //添加到最后
        trends.push(first);
        //更新视图
        option.xAxis.data = trends.slice(0, 20).map(item => String(item.day).slice(-4));
        option.series[0].data = trends.slice(0, 20).map(item => item.sure_cnt);
        echart.setOption(option);
    }
    //鼠标移入停止动画
    echart.on("mousemove", function () {
        clearInterval(id);
    });
    //鼠标移出继续动画
    echart.on("mouseout", function () {
        id = setInterval(move, 3000);
    });
    echart.setOption(option);

发送事件

function play() {
        //发送一个显示提示的动作
        echart.dispatchAction({
            //显示提示
            type: 'showTip',
            //系列的index，在tooltip的trigger为axis的时候可选
            seriesIndex: 0,
            //数据项的index，如果不指定也可以通过那么属性根据名称指定数据项
            dataIndex: ind,
            //可选，数据项名称，在有dataIndex的时候忽略
            position: "top",
        });
        ind++;
        if (ind >= 20) {
            ind = 0;
        }
    }

echats基础

一.简介

二.使用

三.基本图标样式