2. 程式人生 > >Echarts中堆疊條形圖的例項&legend引數設定 由水平變為側邊垂直排列

Echarts中堆疊條形圖的例項&legend引數設定 由水平變為側邊垂直排列

阿新 • • 發佈：2019-02-11
// 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/line',//需要折線圖則載入line模組 'echarts/chart/bar'
// 使用柱狀圖就載入bar模組，按需載入 ], function (ec) { // 基於準備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); option = { tooltip : { trigger: 'axis', axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 預設為直線，可選為：'line' | 'shadow' } }, legend: { data:['直接訪問', '郵件營銷','聯盟廣告','視訊廣告','搜尋引擎'], orient: 'vertical', //垂直顯示 y: 'center'
, //延Y軸居中 x: 'right', //居右顯示 selectedMode: 'single', padding:-0.5 }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'value' } ], yAxis : [ { type : 'category', data : ['週一','週二','週三','週四','週五','週六','週日'] } ], series : [ { name:'直接訪問', type:'bar', stack: '總量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[320, 302, 301, 334, 390, 330, 320] }, { name:'郵件營銷', type:'bar', stack: '總量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[120, 132, 101, 134, 90, 230, 210] }, { name:'聯盟廣告', type:'bar', stack: '總量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[220, 182, 191, 234, 290, 330, 310] }, { name:'視訊廣告', type:'bar', stack: '總量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[150, 212, 201, 154, 190, 330, 410] }, { name:'搜尋引擎', type:'bar', stack: '總量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[820, 832, 901, 934, 1290, 1330, 1320] } ] }; // 為echarts物件載入資料 myChart.setOption(option); } );

相關推薦

Echarts中堆疊條形圖的例項&legend引數設定 由水平變為側邊垂直排列

// 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } });

Echarts中堆疊柱狀圖之百分比顯示

需求：tooltip顯示其數量之外，還需在旁邊顯示該數量所佔總數的百分比，具體效果圖如下： 相關資料 echarts的tooltip中的一個屬性formatter：提示框浮層內容格式器，支援字串模板和回撥函式兩種形式。 # 字串模板 折線（區

echarts中的樹形結構圖（引數分析）

官網程式碼： myChart.showLoading(); //顯示Loading標誌； var myChart = echarts.init(document.getElementById('頁面中div的id')); $.get('data/asset

echarts中Y軸名稱與值的設定

  option = { title : { text: '二手車銷量前十的品牌', /* subtext: '純屬虛構',*/ x:'center' }, color: ['#3398DB'], tool

Echarts中legend圖例預設只有一個為選中狀態

問題：Echarts中legend圖例預設全部選中，折線圖全部顯示 方法：使用legend.selected，例的選中狀態，讓對應data[i]的值為false 程式碼： legend: {

ECharts中的 formatter中的a,b,c,d等引數的意義

原文連結： 其中變數a、b、c在不同圖表型別下代表資料含義為： 折線（區域）圖、柱狀（條形）圖: a（系列名稱），b（類目值），c（數值）, d（無） 散點圖（氣泡）圖 : a（系列名稱），b（資料名稱），c（數值陣列）, d（無） 餅圖、雷達圖 : a（系列名稱），b

echarts中的option.legend.data has not been defined.

1、錯誤描述2、錯誤原因var map = function(mapData){ require( [ 'echarts', 'ech

Matlab中給ｆｉｇｕｒｅ新增圖例（legend），標題（ｔｉｔｌｅ）和顏色（ｃｏｌｏｒ）

        在Matlab繪圖過程中，尤其是需要將多個圖繪製在相同的座標軸中時，通常需要將不同的曲線設定成為不同的顏色。此外，為了直觀，還需要給這張圖示增添標題和圖例。這篇文章展示了在Ｍａｔｌａｂ的繪圖視窗（ｆｉｇｕｒｅ）中設定曲線顏色、新增圖例（legend）和標題（

eclipse中啟動spring-mvc項目時無法加載靜態文件的問題分析

spring-mvc 靜態文件加載 問題表現：eclipse裏使用spring-mvc框架開發web項目，項目正常啟動後能訪問jsp頁面，但jsp頁面的網頁效果沒有生效，並提示jsp文件裏提示js找不到，404錯誤。（1）初步判斷：在瀏覽器裏debug時，jsp頁面提示js文件找不到，提示404錯誤。

數組中是否存在某項

clas == cnblogs arr pan 定義 .proto con als JS查找數組中是否存在某個元素 1.函數方法定義 function contains(arr, obj) { var i = arr.length; while (i--

從數組中刪除某一項

index style 刪除 ret indexof span 數組 pan cnblogs function remove(arr,item){ if(arr.length){ var index = arr.indexOf(item);

maven拓展——eclipse中運行maven項目

pan str tomcat7 web 右鍵 alt bsp image strong 首先，在pom.xml中配置插件： <build> <plugins> <plugin>

asp.net core webapi 似乎未安裝在 IIS 中承載 .NET Core 項目所需的 AspNetCoreModule。請嘗試修復 Visual Studio 以糾正該問題。

pre tin nbsp img 承載 win res windows visual 安裝 DotNetCore.1.1.0-WindowsHosting 後，提示如題錯誤。 解決辦法： ASP.NET Core 應用程序運行，可以選擇 IIS Express 也可以選擇

Maven入門1-在Eclipse中新建Maven Web項目

開發環境 ace 隨著 ati myeclipse server pear javax group 在eclipse中新建Maven Web項目 　　很多時候開發效率低下，大部分原因是IDE環境不熟悉、配置不會配置；因此在學習一項技能之前，有必要對基本的環境配置有所了解，

visual studio 2017 15.3.1中Xamarin.Forms SAP項目xaml沒有智能提示的解決方法

http itl images 目的 如果 sha sap 解決 提示 今天看到vs上有提示了可以更新到15.3.1版本，然後馬上更新了，結果悲劇了。更新以後ReSharper不能用了，好像跟vs2017有了沖突，不管是vs2017自帶的智能提示功能，還是ReS

eclipse，代碼中有錯誤，項目中卻不顯示紅叉

tails pen ces style pos mpi btn project trac ***修改eclipse 代碼提示級別1.單個項目修改項目上右鍵-->properties-->java compiler-->building-->enabl

Python統計列表中的重復項出現的次數

times 個數 %d list 記錄 位置 解決方法 利用 解決 對一個列表，比如[1,2,2,2,2,3,3,3,4,4,4,4]，現在我要統計這個列表裏的重復項，並且重復了幾次也要統計出來。eg1：mylist = [1,2,2,2,2,3,3,3,4,4,4,

echarts中視覺映射器（visualMap）與時間軸（timeline）混用的實現方法

images mon label axis poi max 時間軸 asc clas 1、簡述　　echarts中的 timeline 組件，提供了在多個 ECharts option 間進行切換、播放等操作的功能。　　與其他組件些不同，它需要操作『多個option』。 所

Java 去除List列表中的重復項

contain col next pre pac for sta java std /** * Remove list duplicate item * * @param srcList * @return *

IDEA中創建springboot項目

springboot1、File –》 new --》 Projects..2、next:3、next4、next點擊finish 就完成了註解：其中xxxapplication 是springboot的入口 其中有main 方法 註意的是在項目裏面建包一定要和入口的包名一致本文出自 “1185464