Add vue-echarts-v3 replace vue-charts
This commit is contained in:
lin-xin
parent
c2361cefde
commit
8edc10bee5
|
|
@ -1,6 +1,7 @@
|
|||
# manage-system #
|
||||
基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案
|
||||
|
||||
|
||||
## 前言 ##
|
||||
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -7,37 +7,148 @@
|
|||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
vue-charts：基于vue2和chart.js的图表组件。
|
||||
访问地址：<a href="https://github.com/hchstera/vue-charts" target="_blank">vue-charts</a>
|
||||
vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
|
||||
访问地址：<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(){
|
||||
return {
|
||||
mylabel : '2013-2017年走势',
|
||||
mylabels : ['2013','2014','2015', '2016', '2017'],
|
||||
mydata : [15,30, 20, 80, 100]
|
||||
components: {
|
||||
IEcharts
|
||||
},
|
||||
data: () => ({
|
||||
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>
|
||||
.chart-box{
|
||||
<style scoped>
|
||||
.echarts {
|
||||
float: left;
|
||||
width:500px;
|
||||
margin: 20px 30px;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,43 +7,58 @@
|
|||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
vue-charts：基于vue2和chart.js的图表组件。
|
||||
访问地址：<a href="https://github.com/hchstera/vue-charts" target="_blank">vue-charts</a>
|
||||
vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
|
||||
访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
|
||||
</div>
|
||||
<div class="mix-charts">
|
||||
<canvas id="mix" count="3"></canvas>
|
||||
<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 class="mix-echarts">
|
||||
<IEcharts :option="mix" ></IEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IEcharts from 'vue-echarts-v3';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
mylabel : '2013-2017年价格趋势',
|
||||
mylabels : ['2013','2014','2015', '2016', '2017'],
|
||||
mydata : [15,30, 20, 50, 40],
|
||||
mylabel1 : '2013-2017年价格趋势',
|
||||
mylabels1 : ['2013','2014','2015', '2016', '2017'],
|
||||
mydata1 : [20,25, 50, 90, 70],
|
||||
mylabel2 : '2013-2017年价格趋势',
|
||||
mylabels2 : ['2013','2014','2015', '2016', '2017'],
|
||||
mydata2 : [40,50, 15, 60, 10]
|
||||
mix:{
|
||||
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
|
||||
legend: {
|
||||
data:['步步高','小天才','imoo']
|
||||
},
|
||||
xAxis: {
|
||||
data: ['周一','周二','周三','周四','周五','周末']
|
||||
},
|
||||
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{
|
||||
width:100%;
|
||||
max-width: 900px;
|
||||
.mix-echarts{
|
||||
width:900px;
|
||||
height:600px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue