Add vue-echarts-v3 replace vue-charts

README.md

@@ -1,6 +1,7 @@
 # manage-system #
 基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案
 
+
 ## 前言 ##
 该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。
 

package.json

@@ -10,12 +10,11 @@
   },
   "dependencies": {
     "axios": "^0.15.3",
-    "chart.js": "^2.3.0",
     "element-ui": "^1.1.6",
-    "hchs-vue-charts": "^1.2.7",
     "vue": "^2.1.10",
     "vue-core-image-upload": "^2.0.5",
     "vue-datasource": "^1.0.4",
+    "vue-echarts-v3": "^1.0.2",
     "vue-quill-editor": "^1.1.1",
     "vue-router": "^2.2.0",
     "vue-simplemde": "^0.3.2"

src/components/page/BaseCharts.vue

@@ -7,37 +7,148 @@
             </el-breadcrumb>
         </div>
         <div class="plugins-tips">
-            vue-charts：基于vue2和chart.js的图表组件。
+            vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
-            访问地址：<a href="https://github.com/hchstera/vue-charts" target="_blank">vue-charts</a>
+            访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
+        </div>
+        <div class="echarts">
+            <IEcharts :option="line" ></IEcharts>
+        </div>
+        <div class="echarts">
+            <IEcharts :option="bar" ></IEcharts>
+        </div>
+        <div class="echarts">
+            <IEcharts :option="pie" ></IEcharts>
+        </div>
+        <div class="echarts">
+            <IEcharts :option="pie_radius" ></IEcharts>
         </div>
-        <chartjs-line class="chart-box"
-                      :datalabel="mylabel" :labels="mylabels" :data="mydata"
-                      :linetension="0"></chartjs-line>
-        <chartjs-bar class="chart-box"
-                     :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-bar>
-        <chartjs-pie class="chart-box"
-                     :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-pie>
-        <chartjs-doughnut class="chart-box"
-                     :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-doughnut>
     </div>
 </template>
 
 <script>
+    import IEcharts from 'vue-echarts-v3';
     export default {
-        data: function(){
+        components: {
-            return {
+            IEcharts
-                mylabel : '2013-2017年走势',
+        },
-                mylabels : ['2013','2014','2015', '2016', '2017'],
+        data: () => ({
-                mydata : [15,30, 20, 80, 100]
+            line: {
+                color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
+                title: {
+                    text: '曲线图'
+                },
+                xAxis: {
+                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+                },
+                yAxis:{},
+                series: [
+                    {
+                        name: "销量",
+                        type: "line",
+                        data: [5, 20, 36, 10, 10, 20]
+                    }
+                ]
+            },
+            bar: {
+                color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
+                title: {
+                    text: '柱状图'
+                },
+                xAxis: {
+                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+                },
+                yAxis:{},
+                series: [
+                    {
+                        name: "销量",
+                        type: "bar",
+                        data: [5, 20, 36, 10, 10, 20]
+                    }
+                ]
+            },
+            pie: {
+                color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
+                title : {
+                    text: '饼状图',
+                    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%', '50%'],
+                        data:[
+                            {value:335, name:'衬衫'},
+                            {value:310, name:'羊毛衫'},
+                            {value:234, name:'雪纺衫'},
+                            {value:135, name:'裤子'},
+                            {value:548, name:'高跟鞋'}
+                        ],
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                             }
                         }
                     }
+                ]
+            },
+            pie_radius:{
+                color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
+                title : {
+                    text: '环形图',
+                    x:'center'
+                },
+                tooltip : {
+                    trigger: 'item',
+                    formatter: "{a} <br/>{b} : {c} ({d}%)"
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'left',
+                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
+                },
+                series : [
+                    {
+                        name: '销量',
+                        type: 'pie',
+                        radius : ['40%','60%'],
+                        data:[
+                            {value:335, name:'衬衫'},
+                            {value:310, name:'羊毛衫'},
+                            {value:234, name:'雪纺衫'},
+                            {value:135, name:'裤子'},
+                            {value:548, name:'高跟鞋'}
+                        ],
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            }
+        })
+    }
 </script>
 
-<style>
+<style scoped>
-    .chart-box{
+    .echarts {
         float: left;
         width: 500px;
-        margin: 20px 30px;
+        height: 400px;
     }
 </style>

src/components/page/MixCharts.vue

@@ -7,43 +7,58 @@
             </el-breadcrumb>
         </div>
         <div class="plugins-tips">
-            vue-charts：基于vue2和chart.js的图表组件。
+            vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
-            访问地址：<a href="https://github.com/hchstera/vue-charts" target="_blank">vue-charts</a>
+            访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
         </div>
-        <div class="mix-charts">
+        <div class="mix-echarts">
-            <canvas id="mix" count="3"></canvas>
+            <IEcharts :option="mix" ></IEcharts>
-            <chartjs-line target="mix" bordercolor="#FF6384" :bind="true"
-                          :datalabel="mylabel" :labels="mylabels" :data="mydata"
-                          :linetension="0"></chartjs-line>
-            <chartjs-bar target="mix" backgroundcolor="#36A2EB" :bind="true"
-                         :datalabel="mylabel1" :labels="mylabels1" :data="mydata1"></chartjs-bar>
-            <chartjs-bar target="mix" backgroundcolor="#FFCE56" :bind="true"
-                         :datalabel="mylabel2" :labels="mylabels2" :data="mydata2"></chartjs-bar>
         </div>
     </div>
 </template>
 
 <script>
+    import IEcharts from 'vue-echarts-v3';
     export default {
         data: function(){
             return {
-                mylabel : '2013-2017年价格趋势',
+                mix:{
-                mylabels : ['2013','2014','2015', '2016', '2017'],
+                    color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
-                mydata : [15,30, 20, 50, 40],
+                    legend: {
-                mylabel1 : '2013-2017年价格趋势',
+                        data:['步步高','小天才','imoo']
-                mylabels1 : ['2013','2014','2015', '2016', '2017'],
+                    },
-                mydata1 : [20,25, 50, 90, 70],
+                    xAxis: {
-                mylabel2 : '2013-2017年价格趋势',
+                        data: ['周一','周二','周三','周四','周五','周末']
-                mylabels2 : ['2013','2014','2015', '2016', '2017'],
+                    },
-                mydata2 : [40,50, 15, 60, 10]
+                    yAxis:{},
+                    series: [
+                        {
+                            name: "步步高",
+                            type: "line",
+                            data: [15, 20, 26, 30, 40, 27]
+                        },
+                        {
+                            name: "小天才",
+                            type: "bar",
+                            data: [5, 30, 36, 10, 34, 20]
+                        },
+                        {
+                            name: "imoo",
+                            type: "bar",
+                            data: [35, 40, 30, 50, 60, 40]
                         }
+                    ]
+                }
+            }
+        },
+        components: {
+            IEcharts
         }
     }
 </script>
 
 <style scoped>
-    .mix-charts{
+    .mix-echarts{
-        width:100%;
+        width:900px;
-        max-width: 900px;
+        height:600px;
     }
 </style>

src/main.js

@@ -1,14 +1,10 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router';
-// import VueCharts from 'vue-chartjs';
-require('chart.js/dist/Chart.bundle.min.js')
-require('hchs-vue-charts/dist/vue-charts.js')
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 
 Vue.use(ElementUI);
-Vue.use(VueCharts);
 new Vue({
     router,
     render: h => h(App)