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>
|