October 19, 2019
By: Kevin
Reagent中使用echarts
Reagent中From3是比较罕见的情况，主要用于真正和Dom打交道的情况。
在项目中集成echarts是此类的典型。
其他情况可以借鉴。
引入依赖的库
(require '[reagent.core :as r]
'[reagent.dom :as dom])
(-> js/echarts
js->clj
(get "version"))
Form3
涉及Dom元素交互，我们需要和Form3的生命周期函数打交道。
component-did-mount: 用来初始化chartcomponent-did-update: 用来更新数据
因为比较简单，这里偷懒了，这两个函数用了同一个实现。更复杂的例子中出于性能考虑应该把他俩分开。
(defn init-and-config-chart [comp]
(let [dom (dom/dom-node comp)
chart (.init js/echarts dom)
props (clj->js (r/props comp))]
(js/console.info props)
(.setOption chart props)))
(defn mount-chart [comp]
(js/console.info "mounting.....")
(init-and-config-chart comp))
(defn update-chart [comp]
(js/console.info "updating.....")
(init-and-config-chart comp))
(defn chart-inner []
(js/console.info "inner...")
(r/create-class
{:component-did-mount mount-chart
:component-did-update update-chart
;; 现放一个div，作为chart的容器，高度和宽度在实际项目中应该是计算得到的，实现自适应
:reagent-render (fn []
(js/console.info "inner rendering...")
[:div {:style {:width "600px"
:height "300px"}}])}))
(defn chart-outer [config]
(js/console.info "outer....")
[chart-inner @config])
定义数据
(defonce config-atom (r/atom nil))
(reset! config-atom {:title {:text "Simple"}
:tooltip {}
:legend {:data ["Sales"]}
:xAxis {:data ["aik" "amidi" "chiffon shirt" "pants" "heels" "socks"]}
:yAxis {}
:series [{:name "Sales"
:type "bar"
:data [5, 20, 36, 10, 20, 30]}]})
大功告成
可以改改数据，看看确实是受到atom数据驱动的
[chart-outer config-atom]
执行几次看看
(swap! config-atom update-in [:series 0 :data 0] (partial + 10))
更复杂的echarts的例子（项目中积累，持续更新）
都是来自官方例子, echarts的例子中的json都是没格式化的，key都没加引号
在线转化可以使用咱们blog的：在线转化工具
正负柱状图
(def config-atom01 (r/atom {:tooltip
{:trigger "axis",
:axisPointer {:type "shadow"}},
:legend {:data ["利润" "支出" "收入"]},
:grid
{:left "3%",
:right "4%",
:bottom "3%",
:containLabel true},
:xAxis [{:type "value"}],
:yAxis
[{:type "category",
:axisTick {:show false},
:data
["周一" "周二" "周三" "周四" "周五" "周六" "周日"]}],
:series
[{:name "利润",
:type "bar",
:label
{:normal {:show true, :position "inside"}},
:data [200 170 240 244 200 220 210]}
{:name "收入",
:type "bar",
:stack "总量",
:label {:normal {:show true}},
:data [320 302 341 374 390 450 420]}
{:name "支出",
:type "bar",
:stack "总量",
:label
{:normal {:show true, :position "left"}},
:data [-120 -132 -101 -134 -190 -230 -210]}]}))
[chart-outer config-atom01]
极坐标系下的堆叠柱状图
(def config-atom02 (r/atom {:angleAxis {},
:radiusAxis
{:type "category",
:data ["周一" "周二" "周三" "周四"],
:z 10},
:polar {},
:series
[{:type "bar",
:data [1 2 3 4],
:coordinateSystem "polar",
:name "A",
:stack "a"}
{:type "bar",
:data [2 4 6 8],
:coordinateSystem "polar",
:name "B",
:stack "a"}
{:type "bar",
:data [1 2 3 4],
:coordinateSystem "polar",
:name "C",
:stack "a"}],
:legend {:show true, :data ["A" "B" "C"]}}))
[chart-outer config-atom02]
堆叠柱状图
(def config-atom03 (r/atom {:tooltip
{:trigger "axis",
:axisPointer {:type "shadow"}},
:legend
{:data
["直接访问"
"邮件营销"
"联盟广告"
"视频广告"
"搜索引擎"
"百度"
"谷歌"
"必应"
"其他"]},
:grid
{:left "3%",
:right "4%",
:bottom "3%",
:containLabel true},
:xAxis
[{:type "category",
:data
["周一" "周二" "周三" "周四" "周五" "周六" "周日"]}],
:yAxis [{:type "value"}],
:series
[{:name "直接访问",
:type "bar",
:data [320 332 301 334 390 330 320]}
{:name "邮件营销",
:type "bar",
:stack "广告",
:data [120 132 101 134 90 230 210]}
{:name "联盟广告",
:type "bar",
:stack "广告",
:data [220 182 191 234 290 330 310]}
{:name "视频广告",
:type "bar",
:stack "广告",
:data [150 232 201 154 190 330 410]}
{:name "搜索引擎",
:type "bar",
:data [862 1018 964 1026 1679 1600 1570],
:markLine
{:lineStyle {:normal {:type "dashed"}},
:data [[{:type "min"} {:type "max"}]]}}
{:name "百度",
:type "bar",
:barWidth 5,
:stack "搜索引擎",
:data [620 732 701 734 1090 1130 1120]}
{:name "谷歌",
:type "bar",
:stack "搜索引擎",
:data [120 132 101 134 290 230 220]}
{:name "必应",
:type "bar",
:stack "搜索引擎",
:data [60 72 71 74 190 130 110]}
{:name "其他",
:type "bar",
:stack "搜索引擎",
:data [62 82 91 84 109 110 120]}]}))
[chart-outer config-atom03]
嵌套环形图
(def config-atom04 (r/atom {:tooltip
{:trigger "item",
:formatter "{a} <br/>{b}: {c} ({d}%)"},
:legend
{:orient "vertical",
:x "left",
:data
["直达"
"营销广告"
"搜索引擎"
"邮件营销"
"联盟广告"
"视频广告"
"百度"
"谷歌"
"必应"
"其他"]},
:series
[{:name "访问来源",
:type "pie",
:selectedMode "single",
:radius [0 "30%"],
:label {:normal {:position "inner"}},
:labelLine {:normal {:show false}},
:data
[{:value 335, :name "直达", :selected true}
{:value 679, :name "营销广告"}
{:value 1548, :name "搜索引擎"}]}
{:name "访问来源",
:type "pie",
:radius ["40%" "55%"],
:label
{:normal
{:formatter
"{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ",
:backgroundColor "#eee",
:borderColor "#aaa",
:borderWidth 1,
:borderRadius 4,
:rich
{:a
{:color "#999",
:lineHeight 22,
:align "center"},
:hr
{:borderColor "#aaa",
:width "100%",
:borderWidth 0.5,
:height 0},
:b {:fontSize 16, :lineHeight 33},
:per
{:color "#eee",
:backgroundColor "#334455",
:padding [2 4],
:borderRadius 2}}}},
:data
[{:value 335, :name "直达"}
{:value 310, :name "邮件营销"}
{:value 234, :name "联盟广告"}
{:value 135, :name "视频广告"}
{:value 1048, :name "百度"}
{:value 251, :name "谷歌"}
{:value 147, :name "必应"}
{:value 102, :name "其他"}]}]}))
[chart-outer config-atom04]