Commit ecd30789 authored by liushuai's avatar liushuai

添加新图表类型

parent b42b471c
web/public/static/chart/area.png

2.66 KB | W: | H:

web/public/static/chart/area.png

2.9 KB | W: | H:

web/public/static/chart/area.png
web/public/static/chart/area.png
web/public/static/chart/area.png
web/public/static/chart/area.png
  • 2-up
  • Swipe
  • Onion skin
web/public/static/chart/doughnut.png

3.37 KB | W: | H:

web/public/static/chart/doughnut.png

3.39 KB | W: | H:

web/public/static/chart/doughnut.png
web/public/static/chart/doughnut.png
web/public/static/chart/doughnut.png
web/public/static/chart/doughnut.png
  • 2-up
  • Swipe
  • Onion skin
web/public/static/chart/line.png

3.34 KB | W: | H:

web/public/static/chart/line.png

3.41 KB | W: | H:

web/public/static/chart/line.png
web/public/static/chart/line.png
web/public/static/chart/line.png
web/public/static/chart/line.png
  • 2-up
  • Swipe
  • Onion skin
web/public/static/chart/pie.png

3.19 KB | W: | H:

web/public/static/chart/pie.png

3.26 KB | W: | H:

web/public/static/chart/pie.png
web/public/static/chart/pie.png
web/public/static/chart/pie.png
web/public/static/chart/pie.png
  • 2-up
  • Swipe
  • Onion skin
web/public/static/chart/scatterplot.png

3.78 KB | W: | H:

web/public/static/chart/scatterplot.png

3.72 KB | W: | H:

web/public/static/chart/scatterplot.png
web/public/static/chart/scatterplot.png
web/public/static/chart/scatterplot.png
web/public/static/chart/scatterplot.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -99,7 +99,16 @@ const state = () => ({
lineStyle:{
// color:"auto",
width:2,
}
},
label:{
show: false,
position: 'outside',
color: '#000',
fontWeight:"normal",
fontSize:12,
},
showAreaStyle:false
},
chartSettingsDataZoom: [
{
......
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="label">
<div slot="title" class="collapse-item">
图表标签
<el-switch
v-model="chartSettingsSeries.label.show"
style="pointer-events: none;"
active-color="#13ce66"
>
</el-switch>
</div>
<div class="element-config">
字体
<div v-if="chartSettingsSeries.label.fontWeight=='bolder'" @click="changeWeight('normal')">
<span style="font-size: 18px;font-weight: bolder;cursor: pointer;color: #409EFF;">B</span>
</div>
<div v-else>
<span style="font-size: 18px;font-weight: bolder;cursor: pointer" @click="changeWeight('bolder')">B</span>
</div>
<el-color-picker v-model="chartSettingsSeries.label.color"></el-color-picker>
<el-select style="width: 80px !important;" v-model="chartSettingsSeries.label.fontSize" placeholder="请选择">
<el-option
v-for="items in options"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
<div class="element-config">
位置
<el-select style="width: 120px !important;" v-model="chartSettingsSeries.label.position" placeholder="请选择">
<el-option
v-for="items in positionOptions"
:key="items.value"
:label="items.label"
:value="items.value">
</el-option>
</el-select>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: "chartLabel",
computed: {
...mapState('charts',['chartSettingsSeries','dataSet'])
},
methods:{
changeWeight(value){
this.chartSettingsSeries.label.fontWeight = value;
this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
}
},
mounted() {
if(this.chartSettingsSeries.label.show==true){
this.activeNames=["label"]
}else {
this.activeNames=[]
}
},
watch:{
'activeNames':function (newVal,oldVal) {
if(newVal.length>0){
this.chartSettingsSeries.label.show=true
}else {
this.chartSettingsSeries.label.show=false
}
this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
},
'chartSettingsSeries':{
deep: true,
handler: function (newVal,oldVal) {
// console.log(this.chartSettingsSeries.showPoint)
if(this.chartSettingsSeries.label.show==true){
this.activeNames=["label"]
}else {
this.activeNames=[]
}
}
}
},
data(){
return{
activeNames:[],
options:[
{
value: '10',
label: '10'
},{
value: '11',
label: '11'
},{
value: '12',
label: '12'
},{
value: '13',
label: '13'
},{
value: '14',
label: '14'
},{
value: '15',
label: '15'
},{
value: '16',
label: '16'
},{
value: '17',
label: '17'
},{
value: '18',
label: '18'
},{
value: '19',
label: '19'
},{
value: '20',
label: '20'
},{
value: '21',
label: '21'
},{
value: '22',
label: '22'
},{
value: '23',
label: '23'
},{
value: '24',
label: '24'
},],
positionOptions:[
{label:"标签外",value:'outside'},
{label:"标签内",value:'inside'}
]
}
}
}
</script>
<style scoped>
.collapse-item{
width: 100%;
font-weight: bold;
line-height: 40px;
display: flex;
justify-content: space-between;
margin: 0 15px;
align-items: center;
}
.element-config{
margin: 0px 15px 15px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
<template>
<div class="setting">
<el-collapse v-model="activeNames" >
<el-collapse-item name="line">
<el-collapse @change="handleCollapseChange" v-model="activeNames" >
<el-collapse-item name="line">
<div slot="title" class="collapse-item">
线
</div>
......@@ -16,13 +16,20 @@
</el-option>
</el-select>
</div>
<div class="element-config">
<div class="element-config" v-if="dataSet.type!='radar'">
平滑曲线
<el-switch
v-model="chartSettingsSeries.smooth"
active-color="#13ce66">
</el-switch>
</div>
<div class="element-config" v-else>
填充面积
<el-switch
v-model="chartSettingsSeries.showAreaStyle"
active-color="#13ce66">
</el-switch>
</div>
</el-collapse-item>
</el-collapse>
</div>
......@@ -32,8 +39,19 @@
import { mapState } from 'vuex';
export default {
name: "chartLine",
methods:{
handleCollapseChange(activeNames) {
if (activeNames.includes("line")) {
// 如果要禁止面板2收起,再次将面板2加入activeNames数组
this.activeNames.push("line");
} else {
// 允许其他面板正常操作
this.activeNames = activeNames;
}
},
},
computed: {
...mapState('charts',['chartSettingsSeries'])
...mapState('charts',['chartSettingsSeries','dataSet'])
},
data() {
return {
......
......@@ -4,9 +4,9 @@
<el-collapse-item name="point">
<div slot="title" class="collapse-item" >
<el-switch v-if="dataSet.type=='line'" ref="switch"
<el-switch v-show="dataSet.type=='line'||dataSet.type=='area'" ref="switch"
v-model="chartSettingsSeries.showPoint"
style="pointer-events: none;"
style="pointer-events: none;"
active-color="#13ce66"
>
</el-switch>
......@@ -69,7 +69,7 @@
// }
},
'activeNames':function (newVal,oldVal) {
console.log(this.activeNames)
// console.log(this.activeNames)
if(this.activeNames.length>0){
this.chartSettingsSeries.showPoint=true
}else {
......@@ -80,7 +80,7 @@
'chartSettingsSeries':{
deep: true,
handler: function (newVal,oldVal) {
console.log(this.chartSettingsSeries.showPoint)
// console.log(this.chartSettingsSeries.showPoint)
if(this.chartSettingsSeries.showPoint==true){
this.activeNames=["point"]
}else {
......
......@@ -185,12 +185,12 @@
cursor: pointer;
color: #2c3e50;
font-weight: bold;
font-size: 14px;
font-size: 16px;
border-bottom: 1px solid #eef1f5;
}
.data-item{
padding: 0 20px;
font-size: 12px;
font-size: 14px;
cursor: move;
color: #6a6f77;
line-height: 30px;
......
......@@ -7,8 +7,6 @@
<el-tab-pane label="图表配置" name="1">
<datacleaning></datacleaning>
<changechartstype></changechartstype>
</el-tab-pane>
<el-tab-pane label="元素配置" name="2">
<chart-title></chart-title>
<chart-legend></chart-legend>
<template v-if="dataSet.type =='line' || dataSet.type=='area'">
......@@ -30,7 +28,35 @@
<chart-point></chart-point>
<chart-data-zoom></chart-data-zoom>
</template>
<template v-else-if="dataSet.type =='radar'">
<chart-point></chart-point>
<chart-line></chart-line>
</template>
<chart-label></chart-label>
</el-tab-pane>
<!-- <el-tab-pane label="元素配置" name="2">-->
<!-- <chart-title></chart-title>-->
<!-- <chart-legend></chart-legend>-->
<!-- <template v-if="dataSet.type =='line' || dataSet.type=='area'">-->
<!-- <chart-x-axis></chart-x-axis>-->
<!-- <chart-y-axis></chart-y-axis>-->
<!-- <chart-point></chart-point>-->
<!-- <chart-line></chart-line>-->
<!-- <chart-data-zoom></chart-data-zoom>-->
<!-- </template>-->
<!-- <template v-else-if="dataSet.type =='histogram_01' || dataSet.type=='histogram_02'">-->
<!-- <chart-x-axis></chart-x-axis>-->
<!-- <chart-y-axis></chart-y-axis>-->
<!-- <chart-bar-config></chart-bar-config>-->
<!-- <chart-data-zoom></chart-data-zoom>-->
<!-- </template>-->
<!-- <template v-else-if="dataSet.type =='scatterplot'">-->
<!-- <chart-x-axis></chart-x-axis>-->
<!-- <chart-y-axis></chart-y-axis>-->
<!-- <chart-point></chart-point>-->
<!-- <chart-data-zoom></chart-data-zoom>-->
<!-- </template>-->
<!-- </el-tab-pane>-->
</el-tabs>
......@@ -71,9 +97,11 @@
import Datacleaning from "./showConfig/datacleaning";
import Changechartstype from "./showConfig/changechartstype";
import ChartBarConfig from "./chartConfig/chartBarConfig";
import ChartLabel from "./chartConfig/chartLabel";
export default {
name: "chartedit",
components: {
ChartLabel,
ChartBarConfig,
Changechartstype,
Datacleaning, ChartLine, ChartPoint, ChartYAxis, ChartXAxis, ChartLegend, ChartTitle, ChartDataZoom},
......
......@@ -50,50 +50,73 @@
},
chartSettingsTitle: {
deep: true,
handler: 'upDateMyChart' // 直接将方法名指定为 handler
handler: function() {
let flag = 1
this.upDateMyChart(flag);
} // 直接将方法名指定为 handler
},
chartSettingsLegend: {
deep: true,
handler: 'upDateMyChart' // 直接将方法名指定为 handler
handler: function() {
let flag = 1
this.upDateMyChart(flag);
} // 直接将方法名指定为 handler
},
chartSettingsXAxis:{
deep: true,
handler: 'upDateMyChart' // 直接将方法名指定为 handler
handler: function() {
let flag = 1
this.upDateMyChart(flag);
} // 直接将方法名指定为 handler
},
chartSettingsYAxis:{
deep: true,
handler: 'upDateMyChart' // 直接将方法名指定为 handler
handler: function() {
let flag = 1
this.upDateMyChart(flag);
} // 直接将方法名指定为 handler
},
chartSettingsSeries:{
deep: true,
handler: 'upDateMyChart' // 直接将方法名指定为 handler
handler: function(){
let flag = 1
this.upDateMyChart(flag);
} // 直接将方法名指定为 handler
},
chartSettingsDataZoom:{
deep: true,
handler: 'upDateMyChart' // 直接将方法名指定为 handler
handler: function(){
let flag = 1
this.upDateMyChart(flag);
} // 直接将方法名指定为 handler
},
},
computed: {
...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom','dataSet','fixed']),
},
methods: {
createChart(setOption){
createChart(setOption,flag){
if(this.dataSet.type =="line"){
this.chartSettingsXAxis.type = "category"
this.chartSettingsYAxis.type = "value"
this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
setOption.dataZoom = this.chartSettingsDataZoom
let series = []
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'line'
let item = {}
item.data = this.dataSet.yAxis[i].list
item.type = 'line'
item.label = this.chartSettingsSeries.label
delete this.dataSet.yAxis[i].areaStyle;
series.push(item)
}
setOption.series = []
setOption.series = this.dataSet.yAxis
// setOption.series = []
setOption.series = series
if(this.chartSettingsSeries.showPoint==true){
this.addPointSetting(setOption.series)
}else {
......@@ -111,14 +134,18 @@
setOption.yAxis = this.chartSettingsYAxis
// setOption.xAxis.data=this.dataSet.xAxis.list
setOption.dataZoom = this.chartSettingsDataZoom
let series = []
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'line'
this.dataSet.yAxis[i].areaStyle ={}
let item = {}
item.data = this.dataSet.yAxis[i].list
item.type = 'line'
item.label = this.chartSettingsSeries.label
item.areaStyle ={}
series.push(item)
}
setOption.series = []
setOption.series = this.dataSet.yAxis
// setOption.series = []
setOption.series = series
if(this.chartSettingsSeries.showPoint==true){
this.addPointSetting(setOption.series)
}else {
......@@ -130,45 +157,46 @@
} else if(this.dataSet.type =="histogram_01"){
this.chartSettingsXAxis.type = "category"
this.chartSettingsYAxis.type = "value"
// this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
// this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
// setOption.xAxis.data=this.dataSet.xAxis.list
setOption.dataZoom = this.chartSettingsDataZoom
let series = []
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'bar'
let item={}
item.data = []
item.data = this.dataSet.yAxis[i].list
item.type = 'bar'
item.barGap = this.chartSettingsSeries.barGap + "%"
item.barWidth = this.chartSettingsSeries.barWidth + "%"
item.label = this.chartSettingsSeries.label
series.push(item)
}
setOption.series = []
setOption.series = this.dataSet.yAxis
setOption.series = series
this.addLineSetting(setOption.series)
}else if(this.dataSet.type =="histogram_02"){
console.log("histogram_02")
this.chartSettingsXAxis.type = "value"
this.chartSettingsYAxis.type = "category"
// this.$store.commit('charts/updateChartSettingXAxis', this.chartSettingsXAxis);
// this.$store.commit('charts/updateChartSettingYAxis', this.chartSettingsYAxis);
setOption.xAxis = this.chartSettingsXAxis
setOption.yAxis = this.chartSettingsYAxis
// setOption.xAxis.data=this.dataSet.xAxis.list
setOption.dataZoom = this.chartSettingsDataZoom
let series = []
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'bar'
this.dataSet.yAxis[i].barGap = this.chartSettingsSeries.barGap + "%"
this.dataSet.yAxis[i].barWidth = this.chartSettingsSeries.barWidth + "%"
delete this.dataSet.yAxis[i].areaStyle;
let item = {}
item.data = []
item.data = this.dataSet.yAxis[i].list
item.type = 'bar'
item.barGap = this.chartSettingsSeries.barGap + "%"
item.barWidth = this.chartSettingsSeries.barWidth + "%"
item.label = this.chartSettingsSeries.label
series.push(item)
}
setOption.series = []
setOption.series = this.dataSet.yAxis
setOption.series = series
}else if(this.dataSet.type=="scatterplot"){
this.chartSettingsXAxis.type = "category"
......@@ -179,30 +207,152 @@
this.chartSettingsSeries.showPoint = true
this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
let series=[]
for(var i in this.dataSet.yAxis){
this.dataSet.yAxis[i].data = []
this.dataSet.yAxis[i].symbol = this.chartSettingsSeries.symbol
this.dataSet.yAxis[i].symbolSize = this.chartSettingsSeries.symbolSize
let item = {}
item.data=[]
item.symbol = this.chartSettingsSeries.symbol
item.symbolSize=this.chartSettingsSeries.symbolSize
let list = []
for(var j=0;j<this.dataSet.yAxis[i].list.length;j++){
this.dataSet.yAxis[i].data[j] = [j,parseFloat(this.dataSet.yAxis[i].list[j])]
let items = [j,parseFloat(this.dataSet.yAxis[i].list[j])]
list.push(items)
}
this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
this.dataSet.yAxis[i].type = 'scatter'
// this.dataSet.yAxis[i].data = data
}
item.data=this.dataSet.yAxis[i].list
item.type = 'scatter'
item.label = this.chartSettingsSeries.label
series.push(item)
}
setOption.series = series
// for(var i in this.dataSet.yAxis){
// this.dataSet.yAxis[i].data = []
// this.dataSet.yAxis[i].symbol = this.chartSettingsSeries.symbol
// this.dataSet.yAxis[i].symbolSize = this.chartSettingsSeries.symbolSize
// for(var j=0;j<this.dataSet.yAxis[i].list.length;j++){
// this.dataSet.yAxis[i].data[j] = [j,parseFloat(this.dataSet.yAxis[i].list[j])]
//
// }
// this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
// this.dataSet.yAxis[i].type = 'scatter'
// }
// console.log(this.dataSet.yAxis)
// setOption.series = []
// setOption.series = this.dataSet.yAxis
}else if(this.dataSet.type=="radar"){
this.chartSettingsSeries.showPoint = true
this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
let indicator = []
let maxLength = 0;
let data = [{
type :"radar",
data : [],
lineStyle:{
width:this.chartSettingsSeries.lineStyle.width
},
symbol: this.chartSettingsSeries.symbol, // 指定数据点的形状,例如 'circle'、'rect'、'diamond' 等
symbolSize: this.chartSettingsSeries.symbolSize, // 指定数据点的大小
}]
for(var i in this.dataSet.yAxis){
if (this.dataSet.yAxis[i].list.length > maxLength) {
maxLength = this.dataSet.yAxis[i].list.length;
}
let item ={}
item.value = this.dataSet.yAxis[i].list
item.name = this.dataSet.yAxis[i].name
item.label = this.chartSettingsSeries.label
data[0].data.push(item)
}
for(var i=1;i<maxLength+1;i++){
let item ={}
item.name = i+""
indicator.push(item)
}
setOption.radar= {
// shape: 'circle',
indicator: indicator
}
setOption.series = []
setOption.series = data
if(this.chartSettingsSeries.showAreaStyle==true){
setOption.series[0].areaStyle = {}
}else {
setOption.series[0].areaStyle = null
}
}else if(this.dataSet.type=="pie"){
if(flag==0){
this.chartSettingsSeries.label.show = true
}
setOption.series = []
let series = [{}]
series[0].type = "pie"
series[0].radius = '75%'
series[0].data = []
series[0].label = this.chartSettingsSeries.label
if(this.dataSet.yAxis.length>0){
series[0].name = this.dataSet.yAxis[0].name
for(var i in this.dataSet.yAxis[0].list){
let item = {}
item.value = this.dataSet.yAxis[0].list[i]
item.name = (Number(i)+1).toString()
series[0].data.push(item)
}
}else {
return setOption
}
setOption.series = series
}else if(this.dataSet.type=="doughnut"){
if(flag==0){
this.chartSettingsSeries.label.show = true
}
setOption.series = []
setOption.series = this.dataSet.yAxis
// console.log( setOption.series)
let series = [{}]
series[0].type = "pie"
series[0].radius = ['40%',"75%"]
series[0].data = []
series[0].label = this.chartSettingsSeries.label
if(this.dataSet.yAxis.length>0){
series[0].name = this.dataSet.yAxis[0].name
for(var i in this.dataSet.yAxis[0].list){
let item = {}
item.value = this.dataSet.yAxis[0].list[i]
item.name = (Number(i)+1).toString()
series[0].data.push(item)
}
}else {
return setOption
}
setOption.series = series
}else if(this.dataSet.type=="rose"){
if(flag==0){
this.chartSettingsSeries.label.show = true
}
setOption.series = []
let series = [{}]
series[0].type = "pie"
series[0].radius = ["20","75%"]
series[0].roseType= 'area',
series[0].data = []
series[0].label = this.chartSettingsSeries.label
if(this.dataSet.yAxis.length>0){
series[0].name = this.dataSet.yAxis[0].name
for(var i in this.dataSet.yAxis[0].list){
let item = {}
item.value = this.dataSet.yAxis[0].list[i]
item.name = (Number(i)+1).toString()
series[0].data.push(item)
}
}else {
return setOption
}
setOption.series = series
}
return setOption
},
upDateMyChart(){
upDateMyChart(flag){
// console.log(this.dataSet.type)
if(this.myChart==null){
this.init()
......@@ -216,11 +366,11 @@
valueFormatter: (value) => parseFloat(value).toFixed(Number(that.dataSet.fixed))
}
setOption.color=['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
setOption.tooltip=tooltip
setOption.tooltip = tooltip
setOption.title = this.chartSettingsTitle
setOption.legend = this.chartSettingsLegend
setOption = this.createChart(setOption);
setOption = this.createChart(setOption,flag);
that.myChart.setOption(setOption);
window.addEventListener("resize", () => {
......@@ -256,7 +406,7 @@
}
// this.dataCleaning()
this.myChart = echarts.init(this.$refs.chart)
this.upDateMyChart()
this.upDateMyChart(0)
}
}
}
......
......@@ -33,18 +33,22 @@
list:[
{
name:"line",
},
{
}, {
name:"histogram_01",
},
{
}, {
name:"histogram_02",
},
{
}, {
name:"scatterplot",
},
{
}, {
name:"area",
},{
name:"radar",
},{
name:'pie'
},{
name:'doughnut'
},{
name:'rose'
}
]
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment