346 lines
9.0 KiB
Vue
346 lines
9.0 KiB
Vue
|
<template>
|
|||
|
|
<div style="margin-left:100px;position:relative">
|
|||
|
|
<!-- <div id="echarts1" style="width:620px;height:280px;margin-top: -40px"></div> -->
|
|||
|
|
<!-- <div id="echarts1" style="width: 800px;height:500px;"></div> -->
|
|||
|
|
<!-- <div id="echarts2" style="width: 160px;height:450px;"></div> -->
|
|||
|
|
<!-- <div id="echarts3" style="width: 600px;height:450px;"></div> -->
|
|||
|
|
<!-- <div id="echarts4" style="width: 800px; height: 500px;"></div> -->
|
|||
|
|
<!-- <div class="test-wrapper" style="display:flex;justify-content:space-between;flex-wrap:wrap">
|
|||
|
|
<div class="test1" style="width:650px;height:500px;background:#f00"></div>
|
|||
|
|
<div class="test2" style="width:650px;height:500px;background:#ff0"></div>
|
|||
|
|
</div> -->
|
|||
|
|
<div class="box1" :style="{height:(600/1000*100+'%')}">123</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
export default {
|
|||
|
|
name: 'test',
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
videoShow: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
this.getEchart1()
|
|||
|
|
// this.getEchart2()
|
|||
|
|
this.getEchart3()
|
|||
|
|
// this.getEchart4()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getEchart1 () {
|
|||
|
|
// let xdata = this.xdata
|
|||
|
|
// let ydata = this.ydata
|
|||
|
|
var option = {
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// yAxis: {
|
|||
|
|
// type: 'value'
|
|||
|
|
// },
|
|||
|
|
yAxis: {
|
|||
|
|
// 设置坐标轴字体颜色和宽度
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
data: [10, 50, 30, 20, 60, 70, 80],
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 10
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var echart = document.getElementById('echarts1')
|
|||
|
|
var myChart = echarts.init(echart)
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
getEchart2 () {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('echarts2'))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
// data: ['001', '002', '003'],
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// yAxis: {
|
|||
|
|
// type: 'value'
|
|||
|
|
// },
|
|||
|
|
yAxis: {
|
|||
|
|
// 设置坐标轴字体颜色和宽度
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 90
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
data: [120, 200, 150],
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 10,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
// 这里是重点
|
|||
|
|
color: function (params) {
|
|||
|
|
// 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
|||
|
|
var colorList = ['#ff0', '#ffc', '#2c0', '#d48265', '#91c7ae', '#749f83', '#ca8622']
|
|||
|
|
return colorList[params.dataIndex]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
getEchart3 () {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('echarts3'))
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
position: 'top',
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
boundaryGap: [0, 0.01]
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
axisLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '2011年',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 10,
|
|||
|
|
data: [120, 200, 150],
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
// 这里是重点
|
|||
|
|
color: function (params) {
|
|||
|
|
// 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
|||
|
|
var colorList = ['#ff0', '#ffc', '#2c0', '#d48265', '#91c7ae', '#749f83', '#ca8622']
|
|||
|
|
return colorList[params.dataIndex]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
getEchart4 () {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
|
|||
|
|
var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
|
|||
|
|
var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
|
|||
|
|
var myChart = echarts.init(document.getElementById('echarts4'))
|
|||
|
|
var option = {
|
|||
|
|
// title: {
|
|||
|
|
// text: '2015-2020年中国移动电商市场交易额(纯属虚构）',
|
|||
|
|
// subtext: 'Transaction volume of China mobile e-commerce market from 2015 to 2020',
|
|||
|
|
// left: '20%',
|
|||
|
|
// textStyle: {
|
|||
|
|
// color: 'red',
|
|||
|
|
// fontSize: 30
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
legend: {
|
|||
|
|
right: '45%',
|
|||
|
|
top: '10%'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
// name: '部门',
|
|||
|
|
type: 'category',
|
|||
|
|
data: xData,
|
|||
|
|
nameGap: 60, // 坐标轴名称与轴线之间的距离。
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: { // x轴标签样式
|
|||
|
|
textStyle: {fontSize: 12}
|
|||
|
|
},
|
|||
|
|
nameTextStyle: { // 坐标轴名字样式
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
// name: '交易额（亿元）',
|
|||
|
|
type: 'value',
|
|||
|
|
min: 0,
|
|||
|
|
max: 100000,
|
|||
|
|
splitNumber: 10,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: { // 坐标轴标签样式设置
|
|||
|
|
textStyle: {fontSize: 12},
|
|||
|
|
formatter: '{value}' // 给坐标轴标签加单位
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {fontSize: 12}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
// name: '增长率',
|
|||
|
|
type: 'value',
|
|||
|
|
min: 0,
|
|||
|
|
max: 10,
|
|||
|
|
splitNumber: 10,
|
|||
|
|
position: 'right',
|
|||
|
|
formatter: '{value}',
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {fontSize: 12},
|
|||
|
|
formatter: '{value}' // 给坐标轴标签加单位
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {fontSize: 12},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#F7B502'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
data: barData,
|
|||
|
|
barWidth: 10,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#32C5FF'
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '折线图',
|
|||
|
|
type: 'line',
|
|||
|
|
data: lineData,
|
|||
|
|
barWith: '40%',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
formatter: '{c}'
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#ffb122'
|
|||
|
|
},
|
|||
|
|
yAxisIndex: 1
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus" scoped>
|
|||
|
|
// @media screen and (min-width: 1441px)
|
|||
|
|
// div
|
|||
|
|
// width 19.2rem
|
|||
|
|
// color yellow
|
|||
|
|
// @media screen and (max-width:800px )
|
|||
|
|
// div
|
|||
|
|
// color yellow
|
|||
|
|
// @media screen and (max-width: 800px) and (min-width: 600px)
|
|||
|
|
// @media screen and (max-width: 1440px)
|
|||
|
|
// div
|
|||
|
|
// width 14.4rem
|
|||
|
|
// color red !important
|
|||
|
|
#echarts1
|
|||
|
|
// margin-left 2rem
|
|||
|
|
position absolute
|
|||
|
|
top 0
|
|||
|
|
left 0
|
|||
|
|
z-index 999
|
|||
|
|
#echarts3
|
|||
|
|
// margin-left 2rem
|
|||
|
|
position absolute
|
|||
|
|
top -30px
|
|||
|
|
left 60px
|
|||
|
|
z-index 1000
|
|||
|
|
#echarts2
|
|||
|
|
// margin-left 3.2rem
|
|||
|
|
position absolute
|
|||
|
|
top -130px
|
|||
|
|
// top -38px
|
|||
|
|
// left -190px
|
|||
|
|
z-index 999
|
|||
|
|
transform rotate(90deg)
|
|||
|
|
.box1
|
|||
|
|
width 100px
|
|||
|
|
height 200px
|
|||
|
|
border 1px solid #f00
|
|||
|
|
</style>
|