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

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

阿新 • • 發佈：2019-01-15
$(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', '#