<template>
<!-- 折线图 -->
<div ref="line" class="line"></div>
</template>
<script>
// colorList 横条颜色数组
// data 数据 格式为： []
// areaStyle 渐变色
import * as echarts from 'echarts'
import { onMounted, reactive, toRefs, ref, watch } from 'vue'
export default {
props: {
areaStyle: {
type: Array,
default: null
},
data: {
type: Array,
default: () => {
return []
}
},
yAxisTitle: {
type: String,
default: '能耗:（MV）'
},
gridData: {
type: Object,
default: () => {
return {
left: '10%',
top: '15%',
right: '3%',
bottom: '12%'
}
}
}
},
setup(props) {
let line = ref('')
const state = reactive({})
// let series = []
// props.data.forEach(item => {
// series.push({
// name: item.name,
// data: item.data,
// type: 'line',
// areaStyle: {
// opacity: 0.5,
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, item.areaStyle ? item.areaStyle : null)
// }
// })
// })
const methods = {
drawLine() {
// 初始化
var myChart = echarts.init(line.value)
// 配置项
var normalColor = '#fff'
var fontSize = 16
var datas = props.data
let option = {
tooltip: {
trigger: 'item',
show: true
},
grid: {
left: '10%',
top: '15%',
right: '3%',
bottom: props.data.bottom ? props.data.bottom : '12%'
},
animation: false, //去除加载时缓动动画
legend: {
show: true,
selectedMode: false, //取消图例上的点击事件
data: datas.legendData,
textStyle: {
color: '#fff',
fontSize: 20
}
},
xAxis: {
axisLine: {
lineStyle: {
color: normalColor
}
},
axisTick: {
show: true
},
axisLabel: {
textStyle: {
color: normalColor,
fontSize: fontSize,
fontWeight: '700'
},
margin: 20
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: normalColor
}
},
data: datas.xdata
},
yAxis: [
{
type: 'value',
name: props.data.ytitle ? props.data.ytitle : '能耗:（MV）',
nameTextStyle: {
color: '#fff',
fontSize: '15px'
},
color: normalColor,
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: '#384267',
type: 'dashed'
}
},
axisLabel: {
show: props.data.yline != false ? true : false,
formatter: '{value}',
textStyle: {
color: normalColor,
fontSize: fontSize
}
},
axisLine: {
lineStyle: {
color: '#384267',
width: 1,
type: 'dashed'
},
show: props.data.yline != false ? true : false
}
},
{
type: 'value',
name: '单位：',
show: false,
nameTextStyle: {
fontSize: fontSize
},
color: normalColor,
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: normalColor,
fontSize: fontSize
}
},
axisLine: {
lineStyle: {
color: normalColor
}
}
}
],
series: [
{
name: props.data.legendData[0] ? props.data.legendData[0] : null,
data: props.data.Data1 ? props.data.Data1 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[0] ? props.data.color[0] : '#3A1BFD'
},
{
offset: 1,
color: props.data.color[1] ? props.data.color[1] : '#3BEFFD'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[1] ? props.data.legendData[1] : null,
data: props.data.Data2 ? props.data.Data2 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[2] ? props.data.color[2] : 'rgba( 255, 69, 0,1)'
},
{
offset: 1,
color: props.data.color[3] ? props.data.color[3] : 'rgba( 255, 69, 0,0.31)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[2] ? props.data.legendData[2] : null,
data: props.data.Data3 ? props.data.Data3 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[4] ? props.data.color[4] : 'rgba( 50, 205, 50, 1)'
},
{
offset: 1,
color: props.data.color[5] ? props.data.color[5] : 'rgba( 50, 205, 50, 0.3)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[3] ? props.data.legendData[3] : null,
data: props.data.Data4 ? props.data.Data4 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[6] ? props.data.color[6] : 'rgba(138,43,226,1)'
},
{
offset: 1,
color: props.data.color[7] ? props.data.color[7] : 'rgba(138,43,226,0.3)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[4] ? props.data.legendData[4] : null,
data: props.data.Data5 ? props.data.Data5 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[8] ? props.data.color[8] : 'rgba(255,140,0,1)'
},
{
offset: 1,
color: props.data.color[9] ? props.data.color[9] : 'rgba(255,140,0,0.3)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[5] ? props.data.legendData[5] : null,
data: props.data.Data6 ? props.data.Data6 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[10] ? props.data.color[10] : 'rgba(255, 20, 147,1)'
},
{
offset: 1,
color: props.data.color[11] ? props.data.color[11] : 'rgba(255, 20, 147,0.3)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
// 以上是数据
{
// 第六个柱子底部正方形
name: '',
data: props.data.Data6 ? props.data.Data6 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['200%', '50%'],
symbolSize: [30, 15],
color: props.data.color[11] ? props.data.color[11] : 'rgba(255, 20, 147, 0.3)'
},
{
// 第六个柱子顶部正方形
name: '',
data: props.data.Data6 ? props.data.Data6 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['60', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[10] ? props.data.color[10] : 'rgba(255, 20, 147,1)'
},
{
// 第五个柱子底部正方形
name: '',
data: props.data.Data5 ? props.data.Data5 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['120%', '50%'],
symbolSize: [30, 15],
color: props.data.color[9] ? props.data.color[9] : 'rgba(255,140,0, 0.3)'
},
{
// 第五个柱子顶部正方形
name: '',
data: props.data.Data5 ? props.data.Data5 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['36', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[8] ? props.data.color[8] : 'rgba(255,140,0,1)'
},
{
// 第四个柱子底部正方形
name: '',
data: props.data.Data4 ? props.data.Data4 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['40%', '50%'],
symbolSize: [30, 15],
color: props.data.color[7] ? props.data.color[7] : 'rgba(138,43,226, 0.3)'
},
{
// 第四个柱子顶部正方形
name: '',
data: props.data.Data4 ? props.data.Data4 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['12', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[6] ? props.data.color[6] : 'rgba(138,43,226, 1)'
},
{
// 第三个柱子底部正方形
name: '',
data: props.data.Data3 ? props.data.Data3 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['-40%', '50%'],
symbolSize: [30, 15],
color: props.data.color[5] ? props.data.color[5] : 'rgba(50,205,50, 0.3)'
},
{
// 第三个柱子顶部正方形
name: '',
data: props.data.Data3 ? props.data.Data3 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['-12', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[4] ? props.data.color[4] : 'rgba(50,205,50, 1)'
},
{
// 第二个柱子底部正方形
name: '',
data: props.data.Data2 ? props.data.Data2 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['-120%', '50%'],
symbolSize: [30, 15],
color: props.data.color[3] ? props.data.color[3] : 'rgba(255,69,0,0.3)'
},
{
// 第二个柱子顶部正方形
name: '',
data: props.data.Data2 ? props.data.Data2 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['-35', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[2] ? props.data.color[2] : 'rgba(255,69,0,1)'
},
{
// 第一个底部正方形
name: '',
data: props.data.Data1 ? props.data.Data1 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['-300%', '50%'],
symbolSize: [20, 15],
color: props.data.color[1] ? props.data.color[1] : 'rgba(27,252,229,1)'
},
{
// 第一个顶部正方形
name: '',
data: props.data.Data1 ? props.data.Data1 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['-60', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[0] ? props.data.color[0] : 'rgba(54,8,254,1)'
}
]
}
// ===
myChart.clear()
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.onresize = function () {
myChart.resize()
}
}
}
onMounted(() => {
methods.drawLine()
})
watch(
props,
newVal => {
if (newVal) {
methods.drawLine() //调用ECharts的方法重新绘制
}
},
{
// 被侦听的内容需要是函数的写法 () => stuInfo.friend
deep: true
}
)
return {
...toRefs(state),
...methods,
line
}
}
}
</script>
<style lang="scss" scoped>
.line {
width: 100%;
height: 100%;
}
</style>
注意需要传参
processBar: {
xdata: ['炼钢厂', 'H型钢厂', 'ESP', '石灰厂'],
// Data1: [200, 35, 112, 275],
// Data2: [80, 35, 112, 275],
Data3: [200, 35, 112, 275],
Data4: [80, 35, 112, 275],
// Data5: [200, 35, 112, 275],
// Data6: [80, 35, 112, 275],
legendData: ['', '', '11月', '国标', '', ''],
color: ['', '', '', '', '', '', 'rgba(255,0,255,1)', 'rgba(255,0,255,0.3)']
},
颜色和length没有也需要传 传空
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2
我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这
我正在尝试按0-9和a-z的顺序创建数字和字母列表。我有一组值value_array=['0','1','2','3','4','5','6','7','8','9','a','b'，'光盘'，'e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','','u','v','w','x','y','z']和一个组合列表的数组，按顺序，这些数字可以产生x个字符，比方说三个list_array=[]和一个当前字母和数字组合的数组(在将它插入列表数组之前我会把它变成一个字符串，]current_combo['0','0','0']
是否有可能:before_filter:authenticate_user!||:authenticate_admin! 最佳答案 before_filter:do_authenticationdefdo_authenticationauthenticate_user!||authenticate_admin!end 关于ruby-on-rails-before_filter运行多个方法，我们在StackOverflow上找到一个类似的问题： https://
我正在使用Rails3.1并在一个论坛上工作。我有一个名为Topic的模型，每个模型都有许多Post。当用户创建新主题时，他们也应该创建第一个Post。但是，我不确定如何以相同的形式执行此操作。这是我的代码:classTopic:destroyaccepts_nested_attributes_for:postsvalidates_presence_of:titleendclassPost...但这似乎不起作用。有什么想法吗？谢谢! 最佳答案 @Pablo的回答似乎有你需要的一切。但更具体地说...首先改变你View中的这一行对此#
我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效，它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗？编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分，但这仍然是主要问题。
我的问题的一个例子是体育游戏。一场体育比赛有两支球队，一支主队和一支客队。我的事件记录模型如下:classTeam"Team"has_one:away_team,:class_name=>"Team"end我希望能够通过游戏访问一个团队，例如:Game.find(1).home_team但我收到一个单元化常量错误:Game::team。谁能告诉我我做错了什么？谢谢， 最佳答案 如果Gamehas_one:team那么Rails假设您的teams表有一个game_id列。不过，您想要的是games表有一个team_id列，在这种情况下