data-slide

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Introduction

I am not a real programmer.While, when I practiced data visualation, I got to know Echarts.js, then javascript, vue.js, front-end etc. I taught myself the front-end language and popular framework. It's very diffcult for a green man to develop program. Now I decided to keep away from code for a while and focus my attention on my study.

My initial idea

I believe using web technology to data visulation has bright prospect. I want to develop a application which allow everyman, not merely programmer to make slides with beautiful interactive charts.

• Echarts: interactive chart is better than traditional dull chart made by Excel.
• Ckeditor: Rich text editor. We can use its inline editor mode to make text form slide element.
• Vue: Echarts and Ckeditor meet the demand for text and chart. We also need a desktop application to make slides, just like PowerPoint or Keynote. Vue.js make us easily change the appearance of Echarts chart by change the data. vue-echarts and ckeditor5 are good candidates.
• Vue-grid-layout: Using this package to design layout.
• Element UI: Echarts has many config options. We can use the form components of element-ui to set option.
• Handsontable: We use it to change the chart data. Here we need some skills to well organize the data of echarts in order that user can copy their Excel data directly to the application and then get echart graph.
• Eagle.js/Vue-impress：We use it to control order and animation. You can also try to use vue-Impress.
• Electron: Finally, we use Electron to conduct a desktop application. JSON is good format to save our slides file.

The End

I try this idea. Because I am not a professional programmer; however, It's hard to develop a excellent product. Keep on fighting. Here is an [example] (https://shalaon.github.io/). Here is github repository. data-slide. If you are intersted in this project, welcome to contact me by github.Thank you!