From 2f50a50e47c20a3f9ae2af884671c7c3cf802786 Mon Sep 17 00:00:00 2001 From: 6437a2bc3c05b0675a61786b <6437a2bc3c05b0675a61786b@devide> Date: Tue, 20 Jun 2023 08:56:00 +0000 Subject: [PATCH] Tue Jun 20 08:56:00 UTC 2023 inscode --- src/todolist.js | 100 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 88 insertions(+), 12 deletions(-) diff --git a/src/todolist.js b/src/todolist.js index b92abf1..84addd7 100644 --- a/src/todolist.js +++ b/src/todolist.js @@ -1,13 +1,89 @@ -- var cards = [{ title: 'Mountain View', copy: 'Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains', button: 'View Trips' }, { title: 'To The Beach', copy: 'Plan your next beach trip with these fabulous destinations', button: 'View Trips' }, { title: 'Desert Destinations', copy: 'It\'s the desert you\'ve always dreamed of', button: 'Book Now' }, { title: 'Explore The Galaxy', copy: 'Seriously, straight up, just blast off into outer space today', button: 'Book Now' }] +var myChart = echarts.init(document.getElementById('main')); +myChart.setOption({ - -mixin card(title, copy, button) - .card - .content - h2.title= title - p.copy= copy - button.btn= button - -main.page-content - each card in cards - +card(card.title, card.copy, card.button) \ No newline at end of file + title: { + x: 'center', + text: 'ECharts Chart Statistics', + subtext: 'Rainbow bar example', + link: 'https://echarts.baidu.com/doc/example.html' + }, + tooltip: { + trigger: 'item' + }, + toolbox: { + show: true, + feature: { + dataView: {show: true, readOnly: false}, + restore: {show: true}, + saveAsImage: {show: true} + } + }, + calculable: true, + grid: { + borderWidth: 0, + y: 80, + y2: 60 + }, + xAxis: [ + { + type: 'category', + show: false, + data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel'] + } + ], + yAxis: [ + { + type: 'value', + show: false + } + ], + series: [ + { + name: 'ECharts Ion Number Statistics', + type: 'bar', + itemStyle: { + normal: { + color: function(params) { + // build a color map as your need. + var colorList = [ + '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', + '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', + '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' + ]; + return colorList[params.dataIndex] + }, + label: { + show: true, + position: 'top', + formatter: '{b}\n{c}' + } + } + }, + data: [12,21,10,4,12,5,6,5,25,23,7], + markPoint: { + tooltip: { + trigger: 'item', + backgroundColor: 'rgba(0,0,0,0)', + formatter: function(params){ + return ''; + } + }, + data: [ + {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/line.png'}, + {xAxis:1, y: 350, name:'Bar', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/bar.png'}, + {xAxis:2, y: 350, name:'Scatter', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/scatter.png'}, + {xAxis:3, y: 350, name:'K', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/k.png'}, + {xAxis:4, y: 350, name:'Pie', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/pie.png'}, + {xAxis:5, y: 350, name:'Radar', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/radar.png'}, + {xAxis:6, y: 350, name:'Chord', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/chord.png'}, + {xAxis:7, y: 350, name:'Force', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/force.png'}, + {xAxis:8, y: 350, name:'Map', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/map.png'}, + {xAxis:9, y: 350, name:'Gauge', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/gauge.png'}, + {xAxis:10, y: 350, name:'Funnel', symbolSize:20, symbol: 'image://https://www.jwtechwriter.com/demos/echarts/funnel.png'}, + ] + } + } + ] +}); \ No newline at end of file -- GitLab