<acronym id="p33pj"><strong id="p33pj"></strong></acronym>
  • <p id="p33pj"><strong id="p33pj"></strong></p>
    <track id="p33pj"></track><td id="p33pj"></td>
    <p id="p33pj"></p>
  • <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

      1. <p id="p33pj"></p>
        axure商城

        Axure中使用JS代碼調用ECharts、AntV圖表

        1.背景

        筆者是一名從業8年的B端產品經理,先后在政府行業、能源行業、交通行業任職,以上幾個行業在15年以后,受互聯網產品的影響,都逐漸開始流行起設計數據看板、駕駛艙等概念。數據看板在B端產品設計中的意義從一開始的門面擔當,逐漸轉變成為了業務運行狀態的晴雨表,在B端產品設計的地位也越來越重要。筆者在實際工作中,設計數據看板的任務越來越多,要求越來越高,這些設計需求來源于市場、甲方、老板,要求產品人員在短時間內,產出高質量、動態的設計原型。論及這些需求產生的原因,最根本的還是互聯網行業對傳統行業的滲透,普遍提高了用戶的體驗閾值。再加上傳統行業的大部分從業者也逐漸年輕化,很多關鍵決策崗位都是由懂業務、懂產品的年輕人擔任,這樣的現實對我們B端的產品經理提出了新的挑戰。

        2.探索

        針對上述需求,筆者開始尋找解決方案,從傳統的解決方案來看,要設計數據看板的原型,常見的方法有:截圖法、html文件法、Axhub Charts法、JS調用法。

        首先帶大家認識一些常見的圖表類型,設計圖表的目標是幫助用戶做出判斷和決策,所以從圖表的功能上可對圖表進行分類,包含比較類、分布類、流程類、地圖類、占比類、區間類、關聯類、時間類、趨勢類。

        螞蟻集團出品的antV對此有詳細的解說,各位看官請移步:antV https://antv-2018.alipay.com/zh-cn/vis/chart/index.html

        3.解決方案

        3.1 截圖法

        截圖法指從一些提供數據圖表生成的網站,將示例圖表調整成自己想要的圖表,截圖在axure中拼接成數據看板。

        優點:簡單、易學、快速、便捷

        缺點:圖表展示效果不好,無法動態化

        以下是筆者收集到的一些常見圖表生成網站:

        • Excel(微軟)

        顧明思義,通過excel生成圖表,再將Excel貼圖進axure中。

        擴展閱讀

        echarts antv 區別比較?

        3.2 html文件法

        html僅限于圖表網站提供html下載的場景下使用。

        主要步驟是:①打開圖表網站->②調整配置參數->③生成html并下載->④上傳至云服務器->⑤在axure中新建框架原件->⑥框架目標填寫html在云服務器上的地址。

        優點:簡單、易學、圖表展示效果好(動態效果)

        缺點:發布麻煩、更新麻煩、需要云服務器

        ①打開圖表網站

        Echarts:

        https://echarts.apache.org/next/examples/zh/editor.html?c=line-simple

        antV:

        https://g2.antv.vision/zh/examples/gallery

        ②調整配置參數

        Echarts:

        antV:

        ③生成html并下載

        Echarts:

        antV:

        根據提示修改好代碼,保存成html文件。

        ④上傳至云服務器

        此過程根據自己的實際情況操作。

        ⑤在axure中新建框架原件

        ⑥文件地址配置

        如果無法顯示,可以嘗試將服務器協議修改為https??蚣苣繕藨撌侵С謍ttp的。

        3.4 Axhub Charts法

        Axhub Charts法是引用別人做好的組件,通過配置組件提供的修改方式,動態修改圖表內容。詳情請移步至Axhub官網:https://axhub.im/charts/,他提供兩種版本,一種是免費版本,一種是收費版本。免費版本只支持echarts、antV的部分圖表,收費版本幾乎全部支持。

        優點:使用簡單、易學、展示效果好(動態圖表)

        缺點:如果圖表示例不滿足需求,需要修改,則修改麻煩,需要對照參數一一調整,無法立即看到調整結果,所見不所得。

        3.5JS調用法

        JS調用法是圖表應用最高階用法,這一切要起源于axure設計的一個最強大的功能:Axure支持javascript原生語法調用,這也是axure與其他原型設計軟件的最大不同之處。那么下面,我將會重點介紹如何利用axure的這個強大功能實現ECharts、AntV的圖表調用。實現隨用隨改、圖表動態展示、快速構建數據看板的目標。

        下文我會為大家詳細介紹axure實現JS調用的方法,axure如何實現ECharts的調用,學會基礎方法,可以修改90%的ECharts圖表,學會進階方法,可以修改98%的ECharts圖表(同時支持4.x和5.x);本文暫不提供axure實現AntV的調用,如有興趣,可購買筆者的產品,Axure圖表元件庫?;蛘咚叫殴P者。學會AntV調用的基礎方法,可以修改95%的AntV圖表,學會進階方法,可以修改100%的antV(支持4.x,之前的版本未驗證,但應該是支持的)圖表。至于echarts的另外2%則需要JavaScript語法,或者找前端的同學配合則可解決。學會調用echasrts的基礎方法只需要您花上3分鐘。

        優點:使用簡單、修改簡單(在ECharts、AntV修改好后,復制代碼立馬可用,所見即所得)、展示效果好(動態圖表)

        缺點:基礎調用方法學習簡單,進階調用方法學習麻煩。

        基礎方法

        • 在axure中新建一個矩形,命名為“bar1”,記住這個名稱,后面改代碼會用到它。

        • 設置矩形的用例,載入時,選中自己。然后,點擊打開鏈接。

        • 按下圖點擊右邊的“fx”。

        • 將下列代碼復制到如圖方框中。

        代碼如下:

        javascript:

        var script = document.createElement(‘script’);

        script.type = “text/javascript”;

        script.src =”https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js”;

        document.head.appendChild(script);

        setTimeout(function(){

        var dom =$(‘[data-label=bar1]’).get(0);

        var myChart = echarts.init(dom);

        option = {

        xAxis: {

        type: ‘category’,

        data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]

        },

        yAxis: {

        type: ‘value’

        },

        grid:{

        containLabel:true,

        top: 15,

        left: 15,

        bottom: 15,

        right: 15

        },

        series: [{

        data: [120, 200, 150, 80, 70, 110, 130],

        type: ‘bar’,

        showBackground: true,

        backgroundStyle: {

        color: ‘rgba(180, 180, 180, 0.2)’

        }

        }]

        };

        if (option && typeof option === “object”){

        myChart.setOption(option, true);

        }}, 800);

        如果出現下圖就代表你成功了。

        現在我把本代碼的注釋版黏貼在下:

        javascript:

        //引入ECharts庫

        var script = document.createElement(‘script’);

        script.type = “text/javascript”;

        script.src =”https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js”;

        document.head.appendChild(script);

        //獲取插入的矩形框對象,bar1是上面取得名字,如果是其它名字,則進行替換

        //這里用了定時器來延遲圖表載入時間,測試時發現剛引入ECharts庫就執行圖形代碼可能會出錯。

        setTimeout(function(){

        //獲取插入的bar1矩形框,作為圖表繪制的容器,如果前面矩形框為其它名字,則bar1改為對應的名字

        var dom =$(‘[data-label=bar1]’).get(0);

        //初始化

        var myChart = echarts.init(dom);

        var option = {

        /*在此處粘貼ECharts官網的示例代碼*/

        };

        //設置數據

        if (option && typeof option === “object”){

        myChart.setOption(option, true);

        }}, 800);

        參考文章:https://www.pmyes.com/thread-35156.htm

        下面我帶你修改一個實例:

        進入echarts官網,選擇一個你中意的圖表,進入它的代碼編輯頁面,如下圖:

        為了避免語法錯誤,直接全選“option ={…};”

        然后替換剛剛那段代碼下圖部分:

        結果如下:

        按照前文所講的,將此段代碼復制進矩形的打開鏈接的“fx”函數中。

        在axure中如下圖顯示:

        按f5運行出現柱狀圖就說明你成功了。

        剛才的方法當然不是萬能的,不行你試試它:

        var labelRight = {

        position: ‘right’

        };

        option = {

        title: {

        text: ‘交錯正負軸標簽’,

        subtext: ‘From ExcelHome’,

        sublink: ‘http://e.weibo.com/1341556070/AjwF2AgQm’

        },

        tooltip: {

        trigger: ‘axis’,

        axisPointer: {??????????? // 坐標軸指示器,坐標軸觸發有效

        type: ‘shadow’??????? // 默認為直線,可選為:’line’ | ‘shadow’

        }

        },

        grid: {

        top: 80,

        bottom: 30

        },

        xAxis: {

        type: ‘value’,

        position: ‘top’,

        splitLine: {

        lineStyle: {

        type: ‘dashed’

        }

        }

        },

        yAxis: {

        type: ‘category’,

        axisLine: {show: false},

        axisLabel: {show: false},

        axisTick: {show: false},

        splitLine: {show: false},

        data: [‘ten’, ‘nine’, ‘eight’, ‘seven’, ‘six’, ‘five’, ‘four’, ‘three’, ‘two’, ‘one’]

        },

        series: [

        {

        name: ‘生活費’,

        type: ‘bar’,

        stack: ‘總量’,

        label: {

        show: true,

        formatter: ‘’

        },

        data: [

        {value: -0.07, label: labelRight},

        {value: -0.09, label: labelRight},

        0.2, 0.44,

        {value: -0.23, label: labelRight},

        0.08,

        {value: -0.17, label: labelRight},

        0.47,

        {value: -0.36, label: labelRight},

        0.18

        ]

        }

        ]

        };

        這就需要進階方法了,想進一步了解,可購買筆者的產品,Axure圖表元件庫?;蛘咚叫殴P者。

        部分效果預覽:

        4.數據看板的前景

        數據看板的本質是對業務運行情況的圖形化展示,往深一點、大一點的方向來說,也可以算作是大數據分析的一種展現形式,隨著人們對業務的理解深入,數據看板能夠為企業的決策者提供一些決策依據,在企業的信息化中,也逐漸受到了決策者的重視,所以快速制作數據看板原型是一件高頻率、長期性的需求。從互聯網當前的工具來看,在axure中使用JS調用圖表的方法,是最靈活、便捷、展示效果較好的最好選擇。

         

        給TA打賞
        共{{data.count}}人
        人已打賞
        高級教程

        Axure教程——用中繼器做穿梭框

        2021-4-8 17:51:18

        高級教程

        【Axure 教程】中繼器高級用法-下拉多選

        2021-5-12 21:44:34

        axure商城
        14 條回復 A文章作者 M管理員
        1. 柯布

          有一點比較尷尬的是,在實際工作中,存在將原型上傳到藍湖供團隊及相關方查看的情況,但在本地查看正常的JS調用在上傳到藍湖后是無法正常調用的。

          • 聽風153041

            一般來說JS調用echarts圖表的話,有網就可以預覽查看吧

        2. 青椒????

          出個進階教程吧

        3. 陳靖

          補充一點,貼貼的代碼中不能有注釋,要把所有注釋都刪掉才行

        4. 一只咩

          我用的js調用法,按照上訴步驟,為什么預覽了矩形框里是空白,請指教

          • 唐隱

            咋解決的呀 快說說 我的病癥和你一樣

          • 陳靖

            我一開始也搞不定,最后終于解決了。文中的代碼直接復制過來是不能用的,文中的單雙引號直接復制過來就變成了中文的單雙引號,要全部替換成英文。
            而且還有其他的格式問題,最好粘貼到vscode中看一下有沒有問題。再復制到axure中。我是一開始在notepad++搞得,刪除了多余的換行和空格,但是還是怎么弄都不合適,后來在vscode中粘貼了一次就 好了

        5. ?108324

          學到了

        6. 不是純純的milk

          JS方法只能用一些簡單的圖表吧。稍微復雜的可不止option呢

          • howl1213

            更復雜的圖表在我的圖表元件庫附贈教程中有提及,方法很通用,需要自己花時間調。目前我的元件庫已實現echarts、antv90%以上圖表,足夠用了

        7. howl1213

          有教程的話不難吧。篇幅很大,是因為用文字描述和貼代碼太多了。離線版本,應用的場景是什么?

        8. 符號

          之前我搞離線版本,也成功植入到axure了,但因為js文件太大,導致axure奔潰了。后面就放棄了。對一些小白來說,還是太難了?

        ?
        個人中心
        購物車
        優惠劵
        今日簽到
        有新私信 私信列表
        搜索
        国产亚洲日韩在线a不卡
        <acronym id="p33pj"><strong id="p33pj"></strong></acronym>
      2. <p id="p33pj"><strong id="p33pj"></strong></p>
        <track id="p33pj"></track><td id="p33pj"></td>
        <p id="p33pj"></p>
      3. <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

          1. <p id="p33pj"></p>