1. 程式人生 > >echarts折線圖的資料檢視樣式重寫

echarts折線圖的資料檢視樣式重寫

$(document).ready(function(){ renderLineDemo(); renderPieDemo(); }); window.onload = function() { var insertListener = function(event){ // console.warn("Another node has been inserted! ", event); if
(event.animationName == "nodeInserted") { $("#"+event.target.getAttribute("id")).DataTable(); console.log(event); console.log($("#"+event.target.getAttribute("id"))); } } ; document.addEventListener("animationstart"
, insertListener, false); // standard + firefox document.addEventListener("MSAnimationStart", insertListener, false); // IE document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari }; function renderLineDemo(){ var echartLineDemo = echarts.init(document.getElementById('echarts-line-1'
)); var option = { title: { text: '未來一週氣溫變化', subtext: '純屬虛構' }, tooltip: { trigger: 'axis' }, legend: { data:['最高氣溫','最低氣溫'] }, toolbox: { show: true, feature: { dataView: {readOnly: true, optionToContent:function(opt) { console.log(11111); var axisData = opt.xAxis[0].data; var series = opt.series; var tableDom = document.createElement("table"); tableDom.setAttribute("id","test"); tableDom.setAttribute("class","table-data-table"); // <table id="test" class="table-bordered table-striped" style="width:100%;text-align:center" var table = '<thead><tr>' + '<td>時間</td>' + '<td>' + series[0].name + '</td>' + '<td>' + series[1].name + '</td>' + '</tr></thead><tbody>'; for (var i = 0, l = axisData.length; i < l; i++) { table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td>' + '</tr>'; } table += '</tbody>'; tableDom.innerHTML = table; return tableDom; } }, saveAsImage: { show:true, title:'儲存為圖片' } } }, xAxis: { type: 'category', boundaryGap: false, data: ['週一','週二','週三','週四','週五','週六','週日'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { name:'最高氣溫', type:'line', data:[11, 11, 15, 13, 12, 13, 10], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { name:'最低氣溫', type:'line', data:[1, -2, 2, 5, 3, 2, 0], markPoint: { data: [ {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5} ] }, markLine: { data: [ {type: 'average', name: '平均值'}, [{ symbol: 'none', x: '90%', yAxis: 'max' }, { symbol: 'circle', label: { normal: { position: 'start', formatter: '最大值' } }, type: 'max', name: '最高點' }] ] } } ] }; echartLineDemo.setOption(option); } function renderPieDemo(){ var echartsPieDemo = echarts.init(document.getElementById('echarts-pie-1')); var option = { title : { text: '某站點使用者訪問來源', subtext: '純屬虛構', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎'] }, series : [ { name: '訪問來源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:234, name:'聯盟廣告'}, {value:135, name:'視訊廣告'}, {value:1548, name:'搜尋引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; echartsPieDemo.setOption(option); }

相關推薦

echarts折線資料檢視樣式重寫

$(document).ready(function(){ renderLineDemo(); renderPieDemo(); }); window.onload = function() {

Echarts自定義資料檢視樣式(表格樣式

用過echarts的同胞們都知道,自帶的資料檢視是怎樣的。在真正做專案時,肯定需要我們自己來寫一個相對美觀的資料檢視。下面以表格樣式的資料檢視為例,來實現一個自己的資料檢視。 <!DOCTYPE html> <html> <head>

echarts 折線 連結無資料斷開的點

http://echarts.baidu.com/examples/editor.html?c=line-stack 正常資料: 當週三週四沒有資料的時候: echats3中series的connectNulls屬性支援連線空值 connectNulls: tr

Echarts折線動態獲取資料例項(附java後臺程式碼)

// 基於準備好的dom,初始化echarts例項 var myChart = echarts.init(document.getElementById('line')); // 指定圖表的配置項和資料 var option = {

echarts動態載入折線資料demo

前面幾節echarts的使用都是靜態常量值得設定,這肯定不能滿足我們在日常開發中的需要,平時專案的資料都是動態的,可變的,所以本章節介紹echarts結合Java 如何動態的載入資料。 =================方式一============

js解析Excel檔案,解析後的資料Echarts折線展示

不多說了,直接上程式碼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js解析Excel</title> <

Echarts折線獲取當前顯示資料

不知道是開啟方式不對還是其他欠缺,感覺Echarts官網提供的Api不完整,挺鬱悶的! 話不多說,直接上程式碼 這是Echarts的滾動條事件,通過滾動動態獲取資料 另提醒,其中也包涵了當前顯示點的經緯度,如果有自動顯示tooltip需求的可以運用

echarts-折線折線虛實/顏色與拐點樣式修改)

效果圖如下圖所示1.繪製一個圖表時,需要有一個給定寬高的容器;基本配置可以閱讀echarts的文件;裡面有很多示例demo~~html 結構: <div id="box"></div>css樣式:<style> #box{

實現Echarts折線的虛實轉換

2-2 stack echart 上進 col alt wid style pan    需求:醫院的體溫單,在統計體溫時,對於正常情況下統計的體溫數據,需要顯示實線;對於進行物理降溫後統計的體溫數據,需要顯示虛線。 現有的體溫單是運用 Echarts 折線圖,統一用實線顯

Echarts 折線y軸標籤值太長時顯示不全的解決辦法

問題 分析 解決辦法 問題 先看一下正常的情況 再看一下顯示不全的情況 所有的資料都是從後臺取的,也就是說動態變化的,一開始的時

Echarts-折線-多條線

//企業排名top5根據客車、貨車 var optionTwo={ tooltip: { trigger: 'axis',

Echarts-折線-單條線

var optionOne={ tooltip: { trigger: 'axis', axisPointer: {

vue下使用echarts折線及其橫座標拖拽功能

vue頁面中使用折線圖,並且有時間段篩選。因此就需要用到橫座標的拖拽功能。 介面效果如下: 現在來看這個效果的實現程式碼: drawLine() { let that = this, lineDate = [], dispatchCount = [

vue下使用echarts折線及其橫坐標拖拽功能

旋轉 tip pos 需要 頁面 技術 too ger draw vue頁面中使用折線圖,並且有時間段篩選。因此就需要用到橫坐標的拖拽功能。 界面效果如下: 現在來看這個效果的實現代碼: drawLine() { let that = this,

echarts折線不堆疊設定

折線圖堆疊的重要引數stack。只要將series 下的 stack 值設定不相同,就不會堆疊了。例項如下: option = {     title: {         text: '折線圖堆疊'     },     tooltip: {         trig

在vue中封裝echarts折線元件

 先來張圖 要實現在父元件引用子元件圖表,父元件需要傳遞給圖表元件幾個資料, id: 圖表例項化需要一個唯一的id; time: x軸的顯示資料,引數名可以自己定義; opData: 用來配置series的系列列表,引數可以自己定義; unit: y軸單

echarts折線案例基於echarts-plain.js

最近接觸前端,要寫個報表,但是由於公司用的是echarts-plain.js,導致我在網上找到的許多屬性設定的東西由於就是不同而失去作用. 使用echarts-plain.js時,dataView不會顯示錶格,只會顯示文字.如果想要顯示錶格的話,需要自己動手寫一

百度echarts折線美化 填充顏色,電波~,分類圓點圓點,填充

 <!-- 為ECharts準備一個具備大小(寬高)的Dom -->     <div id="main"></div>     <!-- 引入 ECharts 檔案 -->     <script src="plug

echarts折線

效果圖 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>折線圖</title> <style type="

echarts折線Demo

option = { backgroundColor: 'black', tooltip: { trigger: 'axis' }, color: ['#f69846', '#00ffb4', '#44aff0', '#