echats的基础知识及使用

今天带大家了解以下echats

什么是echats

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

使用echats的好处

更好的通过图表展示数据（大数据可视化）

echarts中常用的术语

• title：标题
• legend图例
• xAxis、yAxis轴线
• tooltip提示
• toolbox工具箱

echarts中常用的图表类型

• bar柱状图
  

• line折线图
  

加上smooth属性就变成了曲线图

加上s areaStyle：“#f0”面积图

• pie饼状图
  

  加上 radius：[80，50]环形图
  

echarts中常用的颜色相关

• 主题颜色
  1、light
  

2、dark

3、定制主题可前往官方网站定制自己喜欢的，然后下载导入即可使用
网站地址：https://echarts.apache.org/zh/theme-builder.html#acc-visualmap-body

• color调色盘
  1、option.color：color: [“pink”, “#ff0”, “#f0f”, “#0ff”],
  2、series.item.color
  

• itemStyle项的颜色
  1、itemStyle:{color:“#00f” }
  2、itemStyle:{normal:{color:“#93da6c”},emphasis:{color:“#bcff57”}}

echarts中的特殊样式（渐变）

1、定义渐变

//定义渐变
    var linear = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: '#02bcff' // 0% 处的颜色
        }, {
            offset: 1, color: '#5555ff' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    }

2、使用渐变

itemStyle: {
     color: linear,
     borderRadius: [30, 30, 0, 0]
}

echarts的label标签

• show：true是否显示

• position：”insideRight“位置

• formatter格式：formatter: “{a}\n{c}分”

   {a}系列名
   {b}数据名
   {c}数值
   {d}百分百
  

• rich富文本

formatter: "{big|{d}}{small|%}\n{b}",
     rich: {
         big: {
            color: "#f70",
            fontSize: "48px",
            fontWeight: 900,
         },
         small: {
            color: "#f70",
         }
     }

echarts动态显示局部

• 定义option
• 修改option值
• echart.setOption(option);更新数据和视图

echarts缓动动画

详细解释请看代码

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);

这里用到了动画缓动函数：（animationEasing:“bounceInOut”）、事件监听echart.on（”事件名“，处理函数）

还有一个重要的发送事件dispatchAction

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

总结

1、关于echarts官网网址：https://echarts.apache.org/zh/index.html
2、入门实例：https://echarts.apache.org/handbook/zh/get-started/

3、类的方法

4、实例方法

5、动作与事件

6、选项配置：option如何修改

最后，还是希望you可以自己多学会查看官网的api文档，自主学习