7wu1wm0 发表于 2024-8-22 15:41:57

ECharts柱状图和饼图的切换


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;默认<span style="color: black;">状况</span>下ECharts<span style="color: black;">供给</span><span style="color: black;">区别</span>图形间的切换展示，如拆线和柱状之前的切换，只需要简单配置一下Options项<span style="color: black;">就可</span>。但<span style="color: black;">针对</span>柱状图和饼图切换则不支持。接下来介绍<span style="color: black;">怎样</span>定义一个按钮来完成这个切换功能。</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/7WiafGUNVvx4pUkh8ibiawyPFPF6glaOHDKwGtLLhtib79BDJ85xz9iaNxtuuGqdMDJpn9BGoAFNIHXnlL90ghG7t1w/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以上是实现后的效果。</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span style="color: black;">ECharts</span>自定义按钮<span style="color: black;">经过</span>toolbox.feature来定义，以下是定义切换按钮。</p><span style="color: black;"><span style="color: black;">mybtn1</span>: {</span><span style="color: black;"> <span style="color: black;">show</span>: true,</span><span style="color: black;"> title: ,</span><span style="color: black;"> icon: <span style="color: black;">image://images/bar.png</span>,</span><span style="color: black;"> onclick: () =&gt; {</span><span style="color: black;"> this.<span style="color: black;">changeType</span>();</span><span style="color: black;"> }</span><span style="color: black;">},</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">定义对应的onclick事件</p><span style="color: black;">changeType() {</span><span style="color: black;"> <span style="color: black;">if</span> (<span style="color: black;">this</span>.chatType == <span style="color: black;">bar</span>)</span><span style="color: black;"> <span style="color: black;">this</span>.chatType =<span style="color: black;">pie</span>;</span><span style="color: black;"> <span style="color: black;">else</span></span><span style="color: black;"> <span style="color: black;">this</span>.chatType = <span style="color: black;">bar</span>;</span><span style="color: black;"> <span style="color: black;">this</span>.bind();</span><span style="color: black;">}</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">按照</span>现有<span style="color: black;">区别</span>类型进行一个切换，<span style="color: black;">而后</span>重新绑定图表。</p>
    <span style="color: black;">bind() {</span><span style="color: black;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: black;">this</span>.ChatOption.yAxis.<span style="color: black;">data</span>&nbsp;=&nbsp;[];</span><span style="color: black;"> <span style="color: black;">if</span> (<span style="color: black;">this</span>.chatType == <span style="color: black;">bar</span>) {</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.toolbox.feature.mybtn1.icon =<span style="color: black;">image://images/pie.png</span>;</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.series[<span style="color: black;">0</span>].label = {</span><span style="color: black;"> show: <span style="color: black;">true</span>,</span><span style="color: black;"> position: <span style="color: black;">insideLeft</span>,</span><span style="color: black;"> formatter: (p) =&gt; {</span><span style="color: black;"> <span style="color: black;">return</span>p.name +<span style="color: black;">"/"</span> + <span style="color: black;">this</span>.$nformat(p.<span style="color: black;">data</span>);</span><span style="color: black;"> },</span><span style="color: black;"> };</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.tooltip = {</span><span style="color: black;"> trigger: <span style="color: black;">item</span>,</span><span style="color: black;"> };</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.series[<span style="color: black;">0</span>].type = <span style="color: black;">bar</span></span><span style="color: black;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: black;">this</span>.ChatOption.series[<span style="color: black;">0</span>].<span style="color: black;">data</span>&nbsp;=&nbsp;[];</span><span style="color: black;"> <span style="color: black;">this</span>.ChatData.Items.forEach(v =&gt; {</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.yAxis.<span style="color: black;">data</span>.push(v.Name);</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.series[<span style="color: black;">0</span>].<span style="color: black;">data</span>.push(v[<span style="color: black;">this</span>.field]);</span><span style="color: black;"> });</span><span style="color: black;"> }</span><span style="color: black;"> <span style="color: black;">else</span> {</span><span style="color: black;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: black;">this</span>.ChatOption.toolbox.feature.mybtn1.icon&nbsp;=<span style="color: black;">image://images/bar.png</span>;</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.tooltip = {</span><span style="color: black;"> trigger: <span style="color: black;">item</span>,</span><span style="color: black;"> formatter: <span style="color: black;">{a} &lt;br/&gt;{b} : {c} ({d}%)</span></span><span style="color: black;"> };</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.series[<span style="color: black;">0</span>].type =<span style="color: black;">pie</span></span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.series[<span style="color: black;">0</span>].<span style="color: black;">data</span> = [];</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.series[<span style="color: black;">0</span>].label = {</span><span style="color: black;"> };</span><span style="color: black;"> <span style="color: black;">this</span>.ChatData.Items.forEach(v =&gt; {</span><span style="color: black;"> <span style="color: black;">this</span>.ChatOption.series[<span style="color: black;">0</span>].<span style="color: black;">data</span>.push({ value: v[<span style="color: black;">this</span>.field], name: v.Name });</span><span style="color: black;"> });</span><span style="color: black;">&nbsp;&nbsp;&nbsp;&nbsp;}</span><span style="color: black;"> <span style="color: black;">if</span> (<span style="color: black;">this</span>.Chat)</span><span style="color: black;"> <span style="color: black;">this</span>.Chat.setOption(<span style="color: black;">this</span>.ChatOption, <span style="color: black;">true</span>);</span><span style="color: black;">}</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在bind<span style="color: black;">办法</span>中<span style="color: black;">按照</span><span style="color: black;">区别</span>的类型来更改series对应的type<span style="color: black;">就可</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">运用</span>颜色主题</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>要下载一个主题的JS，以下是Beetlex数据分析<span style="color: black;">运用</span>的主题</p>
    <span style="color: black;"><span style="color: black;">(function</span> <span style="color: black;">(root, factory) {</span></span><span style="color: black;"> <span style="color: black;">if</span> <span style="color: black;">(typeof define === function &amp;&amp; define.amd) {</span></span><span style="color: black;"> <span style="color: black;">//</span> <span style="color: black;">AMD. Register as an anonymous module.</span></span><span style="color: black;"> <span style="color: black;">define(, factory);</span></span><span style="color: black;"> <span style="color: black;">}</span> <span style="color: black;">else if (typeof exports === object &amp;&amp; typeof exports.nodeName !== string) {</span></span><span style="color: black;"> <span style="color: black;">//</span> <span style="color: black;">CommonJS</span></span><span style="color: black;"> <span style="color: black;">factory(exports,</span> <span style="color: black;">require(echarts));</span></span><span style="color: black;"> <span style="color: black;">}</span> <span style="color: black;">else {</span></span><span style="color: black;"> <span style="color: black;">//</span> <span style="color: black;">Browser globals</span></span><span style="color: black;"> <span style="color: black;">factory({},</span> <span style="color: black;">root.echarts);</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"><span style="color: black;">}(this,</span> <span style="color: black;">function (exports, echarts) {</span></span><span style="color: black;"> <span style="color: black;">var</span> <span style="color: black;">log = function (msg) {</span></span><span style="color: black;"> <span style="color: black;">if</span> <span style="color: black;">(typeof console !== undefined) {</span></span><span style="color: black;"> <span style="color: black;">console</span> <span style="color: black;">&amp;&amp; console.error &amp;&amp; console.error(msg);</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">};</span></span><span style="color: black;"> <span style="color: black;">if</span> <span style="color: black;">(!echarts) {</span></span><span style="color: black;"> <span style="color: black;">log(ECharts</span> <span style="color: black;">is not Loaded);</span></span><span style="color: black;"> <span style="color: black;">return;</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">var</span> <span style="color: black;">colorPalette = [</span></span><span style="color: black;"> <span style="color: black;">#2ec7c9,</span> <span style="color: black;">#b6a2de, #5ab1ef, #ffb980, #d87a80,</span></span><span style="color: black;"> <span style="color: black;">#8d98b3,</span> <span style="color: black;">#e5cf0d, #97b552, #95706d, #dc69aa,</span></span><span style="color: black;"> <span style="color: black;">#07a2a4,</span> <span style="color: black;">#9a7fd1, #588dd5, #f5994e, #c05050,</span></span><span style="color: black;"> <span style="color: black;">#59678c,</span> <span style="color: black;">#c9ab00, #7eb00a, #6f5553, #c14089</span></span><span style="color: black;"> <span style="color: black;">];</span></span><span style="color: black;"> <span style="color: black;">var</span> <span style="color: black;">theme = {</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">colorPalette,</span></span><span style="color: black;"> <span style="color: black;">title</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">textStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">fontWeight</span>: <span style="color: black;">normal,</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">#008acd</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">visualMap</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">itemWidth</span>: <span style="color: black;">15,</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">[#5ab1ef, #e0ffff]</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">toolbox</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">iconStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">normal</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">borderColor</span>: <span style="color: black;">colorPalette</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">tooltip</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">bac<span style="color: black;">公斤</span>roundColor</span>: <span style="color: black;">rgba(255,255,255,0.8),</span></span><span style="color: black;"> <span style="color: black;">axisPointer</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">type</span>: <span style="color: black;">line,</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">#fff</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">crossStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">#fff</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">shadowStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>:<span style="color: black;">rgba(50,50,50,0.2)</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">textStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">"rgba(255, 255, 255, 1)"</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">dataZoom</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">dataBac<span style="color: black;">公斤</span>roundColor</span>: <span style="color: black;">#efefff,</span></span><span style="color: black;"> <span style="color: black;">fillerColor</span>: <span style="color: black;">rgba(182,162,222,0.2),</span></span><span style="color: black;"> <span style="color: black;">handleColor</span>: <span style="color: black;">#008acd</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">grid</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">borderColor</span>: <span style="color: black;">#eee</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">categoryAxis</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">axisLine</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">#008acd</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">splitLine</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">[#eee]</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">valueAxis</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">axisLine</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">#008acd</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">splitArea</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">show</span>: <span style="color: black;">true,</span></span><span style="color: black;"> <span style="color: black;">areaStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;"></span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">splitLine</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">[#eee]</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">timeline</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">#008acd</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">controlStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">normal</span>: <span style="color: black;">{ color: #008acd },</span></span><span style="color: black;"> <span style="color: black;">emphasis</span>: <span style="color: black;">{ color: #008acd }</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">symbol</span>: <span style="color: black;">emptyCircle,</span></span><span style="color: black;"> <span style="color: black;">symbolSize</span>: <span style="color: black;">3</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">line</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">smooth</span>: <span style="color: black;">true,</span></span><span style="color: black;"> <span style="color: black;">symbol</span>: <span style="color: black;">emptyCircle,</span></span><span style="color: black;"> <span style="color: black;">symbolSize</span>: <span style="color: black;">3</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">candlestick</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">itemStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">normal</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">#d87a80,</span></span><span style="color: black;"> <span style="color: black;">color0</span>: <span style="color: black;">#2ec7c9,</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">#d87a80,</span></span><span style="color: black;"> <span style="color: black;">color0</span>: <span style="color: black;">#2ec7c9</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">scatter</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">symbol</span>: <span style="color: black;">circle,</span></span><span style="color: black;"> <span style="color: black;">symbolSize</span>: <span style="color: black;">4</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">map</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">label</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">normal</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">textStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">#d87a80</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">itemStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">normal</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">borderColor</span>: <span style="color: black;">#eee,</span></span><span style="color: black;"> <span style="color: black;">areaColor</span>: <span style="color: black;">#ddd</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">emphasis</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">areaColor</span>: <span style="color: black;">#fe994e</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">graph</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">colorPalette</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">gauge</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">axisLine</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">[, , ],</span></span><span style="color: black;"> <span style="color: black;">width</span>: <span style="color: black;">10</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">axisTick</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">splitNumber</span>: <span style="color: black;">10,</span></span><span style="color: black;"> <span style="color: black;">length</span>: <span style="color: black;">15,</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">auto</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">splitLine</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">length</span>: <span style="color: black;">22,</span></span><span style="color: black;"> <span style="color: black;">lineStyle</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">color</span>: <span style="color: black;">auto</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">},</span></span><span style="color: black;"> <span style="color: black;">pointer</span>: <span style="color: black;">{</span></span><span style="color: black;"> <span style="color: black;">width</span>: <span style="color: black;">5</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">}</span></span><span style="color: black;"> <span style="color: black;">};</span></span><span style="color: black;"> <span style="color: black;">echarts.registerTheme(macarons,</span> <span style="color: black;">theme);</span></span><span style="color: black;"><span style="color: black;">}));</span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">引入主题脚本后只需要在创建echarts的时候指定<span style="color: black;">关联</span>主题名<span style="color: black;">叫作</span><span style="color: black;">就可</span></p>
    <span style="color: black;">echarts.<span style="color: black;">init</span>(dom, <span style="color: black;">macarons</span>);</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">BeetleX</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">开源跨平台通讯框架(支持TLS)</strong></p><strong style="color: blue;"><span style="color: black;">供给</span>高性能服务和大数据处理<span style="color: black;">处理</span><span style="color: black;">方法</span>
    </strong>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_jpg/7WiafGUNVvx5wTglothR7zH3eKkaNOEDT8s5SECkGYrwibVCulGpoXAahuVDsdWAsn5zibUCd4QkMQzfGZdqyyn0Q/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">https://beetlex.io</strong></p>




星☆雨 发表于 2024-8-22 22:55:22

太棒了、厉害、为你打call、点赞、非常精彩等。

j8typz 发表于 2024-10-5 12:06:17

系统提示我验证码错误1500次 ＼~゛，

m5k1umn 发表于 2024-10-29 15:20:39

你字句如珍珠，我珍藏这份情。
页: [1]
查看完整版本: ECharts柱状图和饼图的切换