zoukankan      html  css  js  c++  java
  • 关于Echarts的使用和遇到的问题

    对于插件工具,感觉按着官方的教程,便可以使用,但是看这个Echarts有点晕乎乎的,还是不能快速的学习啊。

    一、在webpack中使用ECharts

    //通过 npm 获取 echarts
    npm install echarts --save

    在项目里需要用到的界面中,按需引入需要的模块,不做全局引入;如果完整引入Echarts,会有很多冗余的文件,体积会比较大,造成资源加载等问题。(注:require和import的引入区别

    // 引入 ECharts 主模块
    import ECharts from "echarts/lib/echarts";
    //引入折线图
    import "echarts/lib/chart/line";
    //引入提示框
    import "echarts/lib/component/tooltip";
    //引入标题
    import "echarts/lib/component/title";
    //引入图例标志
    import "echarts/lib/component/legend";
    <div
        class="statisticsLineEchart"
        ref="lineEchart"
    ></div>
     //获取到准备绘制的DOM对象
     const ele = this.$refs["lineEchart"];
     //初始化echarts实例
     this.echart = ECharts.init(ele);
     //绘制表格
     this.echart.setOption(this.lineEchartOptions);    

    二、配置选项

    lineEchartOptions = {
        color: ["#FFC44F", "#d14a61", "#76D1D7"],//设置颜色
        title: {  //标题,按需引入其模块,包含表的主标题和副标题的相关配置},
        tooltip: {  //提示,鼠标滑过,鼠标移上去那个提示框的配置},
        legend: {//图例,如果想要图例有效果,legend中数据要和series中name的值保持一致 
          data:["新增","删除"]
        },
        grid: {//网格  },
        toolbox: {//工具箱,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具},
        xAxis: {//x轴},
        yAxis: { //y轴},
        series: [{ //数据
    } ]
    };
    • 图例legend样式:
    • 提示tooltip样式:               

    • 工具箱toolbox样式:           

    三、问题

    • 每次数据请求回来后,使用this.nextTick(()=>{})进行绘制图案
    • TypeError:Cannot read property 'getAttribute' of undefined (在执行图表对象渲染方法init(dom)的时候,确保对象的存在)
  • 相关阅读:
    个人冲刺二(7)
    个人冲刺二(6)
    个人冲刺二(5)
    个人冲刺二(4)
    对称二叉树 · symmetric binary tree
    108 Convert Sorted Array to Binary Search Tree数组变成高度平衡的二叉树
    530.Minimum Absolute Difference in BST 二叉搜索树中的最小差的绝对值
    pp 集成工程师 mism师兄问一问
    17. Merge Two Binary Trees 融合二叉树
    270. Closest Binary Search Tree Value 二叉搜索树中,距离目标值最近的节点
  • 原文地址:https://www.cnblogs.com/songForU/p/11419145.html
Copyright © 2011-2022 走看看