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)的时候,确保对象的存在)
  • 相关阅读:
    PowerDesigner使用教程 —— 概念数据模型 (转)
    面板Panel:1.认识Ext.Panel(转)
    批量替换一个数据库中所有表中所有记录
    Ext.data库中几个常用类的原理及其使用 (转)
    也谈C#.NET防止SQL注入式攻击
    jQuery1.3新特性深度分析(Event)
    Sql实现Split
    SQL Server 清除数据库日志脚本(转)
    ExtJS之面向对象编程基本知识
    实战 SQL Server 2005 镜像配置
  • 原文地址:https://www.cnblogs.com/songForU/p/11419145.html
Copyright © 2011-2022 走看看