zoukankan      html  css  js  c++  java
  • Echarts 入门之基础使用(部份 API)

    在 react 中使用折线图:

    1.安装:npm i echarts

    2.引入模块:

    **** 全部引入 ****
    import echarts from "echarts";
    **** 按需引入 ****
    // 引入 ECharts 主模块:import echarts from 'echarts/lib/echarts';
    // 引入折线:import 'echarts/lib/chart/line'; (按需引入)
    // 引入饼状图:import 'echarts/lib/chart/pie'; (按需引入)
    // 引入柱状图:
    // 引入提示框和标题组件:
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';

    3.获取元素,绘制,刷新,清除

    // 获取画布(需要有固定宽高,因为echarts实质就是canvas)
    this.chartDom = document.getElementById(this.props.domId);
    
    // 初始化 echarts
    this.myChart = echarts.init(this.chartDom);
    
    // 1.绘制图形 2.需要局部刷新 echarts 的时候(不需要先清除数据,再绘制图形,可以直接绘制,起到局部刷新
    this.myChart.setOption(option);
    
    // 清除数据
    this.myChart.clear();
    
    // 释放图表,销毁对象并设为null (慎用,会引起 echarts 的 Cannot read property 'getWidth' of null ,的报错)
    this.myChart.dispose();

    4.绑定事件

     详细事件绑定:this.myChart.on('click', function (params) {...

    5.查看版本

      之前使用雷达图的时候,有些电脑上鼠标移到图形上,没有触发 tooltip ,也没有高亮反应,折腾了一天,发现是版本不一致。

      无反应的是 4.2.0 有反应的是 4.5.0,下面提供检查版本的方法。

      console.log(echarts.version);

      然后,配置上修改版本后,npm i 一下更新版本。

  • 相关阅读:
    P3387 【模板】缩点 tarjan
    P2831 愤怒的小鸟 状压dp
    交流帖
    P3959 宝藏 模拟退火。。。
    B1060 [ZJOI2007]时态同步 dfs
    P1850 换教室 概率dp
    树链刨分(待修改)
    B3403 [Usaco2009 Open]Cow Line 直线上的牛 deque
    B3402 [Usaco2009 Open]Hide and Seek 捉迷藏 最短路
    B5248 [2018多省省队联测]一双木棋 状压dp
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/12331978.html
Copyright © 2011-2022 走看看