Vue安装d3 v3.5.17
1. 第一步，安装需要的依赖：
npm install d3@3.5.17 –save
2.在main.js引入，
import * as d3 from "d3";
在vue原型上绑定d3
Vue.prototype.$d3 = d3;
window.d3 = d3; //暂时设置为全局变量
或者在组件中引入，
import * as d3 from "d3";
此例为在main.js引入d3的应用实例：
demo.vue
<template>
<div class="d3box">
<div id="a"></div>
</div>
</template>
<script>
import dat from "@/assets/dat.js";
export default {
name: "demo",
data() {
return {
aa: dat.data
};
},
mounted() {
this.d3draw();
},
methods: {
d3draw() {
var height = 450,
width = height / 1.138,
top_margin = ~~(width / 13),
amplitude = width / 350;
console.log("%ctop_margin", "font-size:22px;color:red", top_margin);
console.log("%c${10}", "font-size:22px;color:red", "${10}");
var svg = d3
.select("#a")
.append("svg")
.attr("width", 760)
.attr("height", height + top_margin + 10 + 10)
.append("g")
.attr("transform", `translate(${760 / 2 - width / 2},${10})`);
/* var data = dat.data; */
var data = this.aa;
/* console.log("%cdata", "font-size:22px;color:red", data); */
const x = d3
.scale.linear()
.domain([0, data[0].length - 1])
.range([0, width]);
const y = d3
.scale.linear()
.domain([0, data.length - 1])
.range([top_margin, height]);
var line = d3.svg
.line()
.x((d, i) => x(i))
.y(d => -d * amplitude);
/* 画主图部分开始 */
svg
.append("g")
.selectAll(".wave")
.data(data)
.enter()
.append("path")
.attr("transform", (d, i) => `translate(0,${y(i)})`)
.attr("class", "wave")
.attr("d", line);
/* 画主图部分结束 */
}
}
};
</script>
<style lang='scss'>
#a {
svg {
/* background-color: rgb(230, 224, 224); */
.wave {
fill: white;
stroke: #444;
stroke- 1;
}
.wave:hover {
fill: rgb(207, 38, 38);
stroke: rgb(207, 38, 38);
stroke- 1;
}
}
}
</style>
dat.js
const data = [
[11.81, -0.91, -1.09, 11111, -0.59, -0.82, -0.43, -0.68, -0.71, -0.27, -0.28, -0.05, -0.4, -0.06, -0.06, -0.14, 0, -0.01, 0.24, 0.25, -0.04, 0.33, 0.24, 0.15, -0.01, 0.15, -0.06, 0.19, 0.34, 0.36, -0.15, 0.19, 0.02, -0.18, -0.35, -0.47, -0.71, -0.82, -0.45, -0.59, -0.68, -1.16, -1.15, -0.62, -0.25, -0.31, -0.01, 0.35, 0.39, 0.06, 0.16, -0.3, -0.47, -0.44, -0.13, 0.22, 0.9, 1.15, 0.82, 0.1, 0.1, 0.28, -0.05, 0.43, 0.36, 0.61, 0.24, -0.19, -0.95, -0.84, -1.22, -1.84, -1.01, -0.25, 0.73, 1.28, 0.92, 1.05, 0.49, 0.41, 0.06, -0.02, 0.55, 0.71, 1.04, 1.68, 1.67, 2.07, 2.53, 2.49, 2.7, 3.33, 3.18, 3.79, 3.34, 3.45, 2.81, 2.67, 2.27, 1.75, 1.76, 1.16, 1.14, 1, 0.64, 0.32, 0.32, 0.37, 0.17, 0.29, 0.77, 1.14, 1.58, 2.05, 2.33, 3.02, 3.48, 3.84, 4.41, 4.91, 5.44, 6.34, 6.59, 7.2, 8.12, 8.26, 9.25, 10.02, 10.48, 11.06, 12.45, 13.32, 13.67, 14.18, 14.47, 14.6, 14.96, 15.04, 15.16, 14.76, 15.4, 14.88, 14.75, 14.2, 14.36, 13.34, 12.35, 11.72, 11.04, 10.82, 10.25, 9.63, 8.98, 8.92, 8.46, 8.44, 8.96, 8.96, 9.26, 9.49, 9.34, 9.47, 8.98, 9.07, 9.01, 9.39, 10.2, 10.7, 11.48, 11.73, 11.71, 11.73, 11.81, 11.83, 12.09, 12.14, 12.51, 13.05, 12.8, 13.52, 13.15, 13.43, 13.76, 13.58, 13.77, 13.61, 12.36, 10.93, 10.19, 9.18, 9.2, 8.57, 8.74, 8.56, 7.84, 7.34, 7.09, 6.04, 5.78, 5.02, 4.87, 4.43, 3.73, 3.41, 3.28, 2.67, 2.47, 1.96, 1.67, 1.19, 0.89, 0.97, 0.64, 0.3, -0.17, -0.46, -0.67, -0.44, -0.33, -0.73, -0.13, -0.29, -0.27, -0.36, 0.01, 0.24, 0.31, -0.13, -0.07, 0.01, 0.31, 0.32, 0.02, -0.04, -0.04, -0.05, -0.21, 0.17, 0.11, -0.36, -0.15, -0.24, -0.25, -0.08, 0, -0.05, -0.33, -0.48, -0.39, -0.46, -0.55, -0.13, -0.29, -0.09, -0.42, -0.48, -0.2, -0.47, -0.25, -0.46, -0.42, -0.61, -0.25, -0.66, -0.37, -0.34, -0.07, 0.47, 0.34, 0.03, 0.02, -0.56, -0.45, -0.26, -0.02, 0.07, 0.33, 0.29, 0.15, -0.1, 0.05, -0.04, -0.05, 0.31, 0.14, -0.14, -0.13, 0.06, -0.18, -0.36, -0.08, 0.19, -0.19, -0.18, -0.2, -0.26, -0.52, -0.44, -0.58, -0.54],
[-0.61, -0.4, -0.42, -0.38, -0.55, -0.51, -0.71, -0.79, -0.52, -0.4, -0.51, -0.32, -0.63, -0.46, -0.37, -0.33, -0.34, -0.65, -0.34, -0.75, -0.73, -0.75, -0.78, -0.39, -0.54, -0.33, -0.73, -0.49, -0.74, -0.62, -0.75, -0.63, -0.55, -0.6, -0.63, -0.64, -0.62, -0.31, -0.63, -0.53, -0.06, -0.48, -0.48, -0.16, -0.26, -0.07, -0.04, -0.03, -0.3, -0.42, -0.44, -0.44, -0.02, -0.06, -0.49, -0.31, 0.05, -0.12, -0.03, 0.11, 0.29, -0.03, 0.21, 0.5, 0.88, 1.04, 1.07, 1.44, 1.26, 1.45, 1.63, 1.29, 1.43, 1.08, 0.82, 0.69, 0.7, 1.28, 1.16, 1.42, 2.03, 2.11, 2.75, 2.71, 2.53, 2.91, 2.66, 2.89, 3.75, 4.24, 5.19, 6.05, 6.57, 8.83, 10.26, 10.74, 11.68, 12.43, 13.36, 13.91, 14.31, 14.74, 14.78, 15.01, 15.61, 15.58, 16.24, 16.23, 16.03, 16.3, 16.06, 16.46, 15.99, 16.01, 16.36, 16.22, 15.7, 15.64, 15.84, 15.2, 14.95, 15.06, 14.84, 14.1, 14.04, 14.15, 13.58, 13.03, 12.35, 11.77, 11.46, 10.62, 10.81, 11.22, 11.61, 11.64, 11.24, 11.69, 11.24, 10.53, 10.61, 9.95, 9.7, 9.03, 8.24, 8.22, 7.25, 7.09, 6.71, 6.28, 5.72, 5.09, 4.96, 5.15, 5.3, 5.46, 5.22, 5.32, 5.23, 5.29, 5.77, 5.52, 5.77, 5.77, 5.7, 5.74, 5.95, 5.7, 5.67, 5.75, 5.92, 6.05, 5.9, 6.57, 6.43, 6.55, 7.27, 7.15, 6.97, 7.05, 7, 7.2, 6.93, 7.33, 7.07, 7.87, 8.22, 8.5, 8.86, 8.97, 9.14, 9.95, 9.64, 9.49, 9.45, 10.03, 9.65, 9.8, 9.63, 8.98, 9.01, 9.05, 8.88, 8.26, 7.37, 6.15, 5.13, 4.39, 4.32, 3.82, 4.05, 4, 3.31, 2.76, 1.9, 1.06, 1.44, 1.47, 1.94, 1.84, 0.74, 0.36, -0.18, 0.09, 0.47, 0.78, 1.04, 0.78, 0.2, 0.08, -0.31, -0.92, -1.04, -0.56, -0.74, -0.38, -0.67, -0.13, -0.49, -0.44, -0.09, -0.07, 0.32, 0.16, 0.41, 0.22, 0.25, 0.21, 0.43, 0.57, 0.5, 0.18, 0.28, 0.48, 0.41, 0.14, 0.17, -0.04, 0.38, -0.12, 0.33, -0.02, 0.09, -0.17, 0.07, -0.78, -1.44, -0.88, -0.7, 0.07, 0, 0, 0.03, -0.46, -0.49, -0.39, 0.05, -0.31, -0.29, -0.06, -0.33, -0.35, -0.29, -0.24, -0.02, -0.2, -0.29, -0.38, 0.04, -0.39, -0.34, -0.58, -0.26, -0.64, -1.05, -0.83, -0.8, -0.47, -0.13, -0.12],
[-1.43, -1.15, -1.25, -1.13, -0.76, -0.25, 0.4, 0.26, 0.3, 0.36, 0.73, 0.27, 0.33, 0.04, 0.41, -0.11, 0.16, 0.46, 0.56, 0.63, 0.14, -0.09, -0.42, -0.96, -0.16, 0.58, 0.88, 0.65, 0.72, 0.65, 0.02, 0.04, -0.53, -1, -1.35, -1.25, -1.25, -0.55, -0.73, -0.28, -0.33, -0.46, 0.02, 0.3, 0.09, 0, -0.18, -0.17, -0.16, -0.04, 0.04, -0.03, 0.2, -0.05, -0.28, -0.38, 0.11, -0.22, -0.1, -0.27, -0.41, -0.35, -0.31, -0.04, 0.19, 0.14, 0.14, 0.22, 0.4, 0.6, 0.32, 0.18, 0.43, 0.43, 0.52, 0.25, 0.19, 0.67, 0.93, 1.48, 1.53, 1.83, 1.94, 2.29, 2.22, 2.28, 3.06, 3.23, 3.66, 3.98, 4.42, 5.09, 4.99, 5.47, 6.14, 6.33, 6.52, 6.96, 7.26, 7.12, 7.01, 6.93, 6.94, 7.23, 7.19, 8.77, 10.49, 11.72, 13.16, 14.88, 16.91, 18.23, 19.1, 20.04, 20.6, 22.76, 25.66, 28.43, 28.46, 28.61, 27.12, 25.79, 23.69, 21.82, 19.8, 18.24, 16.4, 14.43, 13.95, 13.86, 12.95, 12.74, 11.9, 11.79, 12.31, 12.39, 12.64, 13.72, 13.69, 14.19, 13.83, 13.94, 15.33, 16.02, 17.06, 17.6, 17.45, 17.27, 17.6, 17.43, 17.82, 18.61, 19.29, 19.67, 19.26, 19.03, 18.08, 17.58, 16.68, 15.46, 14.41, 13.23, 12.05, 10.93, 10.37, 9.85, 9.38, 8.79, 8.29, 7.51, 7.45, 6.86, 6.36, 6.15, 5.26, 5.2, 4.35, 4.09, 4.09, 4.56, 4.75, 4.5, 4.45, 4.6, 4.76, 4.92, 4.85, 4.79, 4.77, 4.99, 4.87, 4.62, 4.96, 4.88, 4.94, 4.95, 4.05, 3.86, 3.11, 2.77, 3.55, 3.89, 4.2, 3.68, 3.09, 2.55, 2.55, 2.22, 2.26, 2.43, 2.68, 2.28, 1.53, 1.6, 1, 0.74, -0.13, -0.33, -0.31, -0.1, -0.23, -0.15, -0.4, 0.01, -0.15, -0.12, -0.18, -0.09, -0.6, -0.34, -0.27, -0.17, -0.62, -0.29, -0.38, -0.62, -0.48, -0.47, -0.45, -0.61, -0.68, -0.54, -0.54, -0.48, -0.63, -0.4, -0.58, -0.93, -0.8, -0.75, -0.5, -0.87, -0.59, -0.59, -0.5, -0.37, -0.37, -0.35, -0.81, -0.57, -0.5, -0.27, -0.51, -0.47, -0.68, -0.49, -0.33, -0.18, -0.17, -0.21, -0.18, -0.16, -0.11, -0.4, -0.49, -0.24, -0.51, -0.49, -0.1, -0.1, 0.02, -0.28, -0.17, -0.03, -0.5, 0, 0.08, 0.1, -0.29, -0.33, -0.29, 0.16, 0.83, 0.99, 1.28, 0.11, -0.77, -0.88, -0.45, -1.01],
[-1.09, -0.85, -0.72, -0.74, -0.26, -0.04, -0.19, 0.18, 0.03, 0.19, 0.14, -0.26, -0.19, -0.48, -0.34, -0.44, -0.86, -0.67, -0.31, -0.25, 0.18, 0.21, 0.55, 0.22, 0.4, -0.12, 0, 0.29, -0.22, -0.36, 0.14, -0.06, -0.23, -0.22, -0.23, -0.37, 0.03, -0.24, -0.03, -0.27, 0.1, 0.04, -0.37, -0.32, -0.37, -0.09, -0.03, 0.04, -0.14, -0.11, -0.29, -0.36, -0.43, -0.51, -0.26, -0.24, -0.55, -0.48, -0.52, -1, -0.75, -0.81, -0.52, -1.01, -0.78, -0.16, 0.41, 0.97, 1.71, 1.35, 0.99, 0.54, 0.2, 0.06, 0, 0.35, 0.12, 0.66, 0.81, 1.03, 1.43, 1.72, 2.09, 2.48, 2.5, 3.03, 2.87, 2.4, 1.9, 2.73, 3.76, 4.16, 4.21, 5.11, 5.57, 5.74, 6.05, 5.97, 5.98, 6.45, 6.4, 6.8, 7.13, 7.73, 8.37, 8.74, 9.01, 9.81, 10.53, 11.02, 11.84, 13.04, 15.03, 17.07, 19.48, 21.53, 22.73, 24.06, 25.85, 29.61, 33.2, 34.77, 34.99, 32.77, 31.18, 29.21, 28.22, 27.27, 26.45, 24.6, 22.35, 20.59, 18.15, 17.15, 15.75, 14.4, 13.23, 11.98, 11.85, 11.1, 11.01, 10.66, 9.85, 10, 10.22, 9.95, 10.3, 10.05, 9.94, 9.88, 9.93, 11.53, 13.6, 14.48, 15.97, 17.4, 17.63, 15.39, 12.66, 10.13, 10.01, 9.65, 8.82, 8.52, 8.05, 8.21, 7.77, 8.06, 7.83, 7.95, 8.44, 8.23, 8.62, 9.34, 10.33, 10.96, 12.33, 13.11, 12.67, 11.73, 11.74, 10.89, 10.27, 9.09, 8.43, 7.49, 6.9, 5.9, 4.68, 3.85, 3.23, 3.17, 3.45, 3.3, 3.09, 3.44, 3.27, 3.38, 3.18, 3.33, 3.17, 2.92, 2.88, 2.73, 2.66, 2.19, 2.35, 2.68, 2.5, 1.82, 1.72, 1.07, 1, 0.63, 0.5, -0.15, -0.11, 0.16, 0.52, -0.04, -0.36, -0.37, -0.85, -0.8, -0.84, -0.79, -0.49, -0.64, -0.36, -0.11, -0.03, -0.32, -0.23, -0.35, -0.19, -0.36, -0.03, -0.16, -0.29, -0.02, -0.35, 0.04, -0.37, 0.07, -0.03, 0.1, -0.35, 0, 0.46, 0.8, 0.96, 1.11, 1.02, 1.04, 0.46, 0.56, 0.55, 0.42, 0.36, 0.32, 0.49, -0.34, -0.57, -0.96, -0.82, -1.09, -1.31, -1.05, -1.3, -1.25, -0.64, -0.69, -0.17, 0.11, 0.18, 0.23, 0.23, -0.18, -0.53, -1.01, -0.77, -0.78, -0.67, -0.22, 0.17, 0.89, -0.1, -0.36, -0.64, 0.01, 0.48, 0.52, -0.14, -1.13, -1.07, -1.03, -0.78, -0.4, 0.18, 0.27],
[-1.13, -0.98, -0.93, -0.9, -1.14, -1, -0.9, -1.18, -1.3, -1.07, -1.18, -1.37, -0.85, -0.89, -0.96, -0.91, -0.97, -1.25, -0.92, -0.98, -1.37, -0.83, -1.26, -1.29, -0.85, -1.17, -0.87, -0.83, -1, -0.73, -1.08, -1.02, -0.79, -0.52, -0.78, -0.97, -1.06, -0.78, -1.06, -0.97, -0.87, -0.92, -1.05, -0.79, -0.77, -0.76, -1.02, -0.99, -0.81, -0.77, -0.43, -0.59, -0.86, -0.44, -0.61, -0.67, -0.61, -0.35, -0.79, -0.6, -0.6, -0.16, 0.02, 0.32, 0.35, 0.69, 0.71, 0.45, -0.06, -0.11, -0.34, -0.47, -0.06, 0.21, 0.54, 0.98, 1.12, 1, 1.2, 1.03, 0.98, 0.73, 0.99, 0.93, 1.27, 1.18, 1.38, 1.73, 2.22, 2.09, 3.02, 3.57, 3.73, 3.72, 4.14, 4.09, 4.77, 5.37, 5.93, 6.57, 7.24, 7.61, 8.06, 9, 9.53, 10.24, 11.03, 11.54, 12.54, 13.28, 14.24, 15.12, 15.54, 15.56, 15.06, 15, 13.89, 12.93, 12.22, 10.88, 10.28, 9.42, 8.48, 8.14, 7.69, 7.37, 6.7, 6.31, 6.18, 5.83, 5.44, 5.39, 4.82, 4.42, 4.64, 4.42, 3.72, 3.53, 3.26, 3.08, 3.95, 4.44, 4.97, 5.54, 5.62, 6.11, 5.82, 6.17, 5.84, 5.91, 6.5, 6.56, 6.91, 7.44, 7.84, 8.28, 8.47, 9.12, 9.54, 9.25, 9.18, 9.22, 8.98, 8.77, 8.41, 8.85, 8.59, 8.31, 7.88, 7.02, 6.7, 5.66, 5.25, 5.26, 4.72, 4.91, 4.69, 4.33, 4.13, 3.47, 3.87, 3.8, 4.09, 4.24, 4.36, 4.63, 4.77, 4.85, 5, 4.74, 4.92, 4.94, 4.62, 4.17, 3.84, 3.18, 3.03, 3, 2.52, 2.62, 2.61, 2.08, 2.3, 2.18, 2.36, 2.39, 2.27, 1.6, 1.51, 0.97, 0.77, 0.94, 0.66, 1.06, 0.94, 1.33, 1.35, 0.41, -0.13, -0.67, -1.13, -0.74, -1.04, -0.86, -0.75, -0.46, -0.28, -0.36, -0.43, -0.14, -0.41, -0.07, -0.45, -0.19, -0.19, -0.05, -0.23, -0.04, 0.21, 0.03, 0.21, -0.31, -0.8, -0.69, -0.22, -0.06, 0.84, 0.79, 0.68, 0.41, 0.76, 0.75, 0.7, 0.43, 0.57, 0.11, 0.39, 0.42, 0.37, 0.52, 0.16, 0.49, 0.03, 0.4, 0.22, 0, -0.09, -0.16, 0, 0.06, -0.14, 0.03, 0.07, 0, -0.12, -0.09, 0.14, -0.04, -0.42, -1.16, -1.21, -1.33, -0.64, -0.56, -0.03, -0.01, -0.12, -0.19, -0.37, -0.01, -0.27, -0.47, -0.49, -0.23, -0.75, -0.29, -0.54, -0.65, -0.64, -0.94],
[-0.66, -0.89, -0.87, -0.87, -1.07, -1.14, -1.09, -1.61, -1.36, -1.55, -1.45, -2.04, -1.76, -2.03, -1.86, -1.95, -1.86, -1.2, -1.34, -1.09, -0.62, -0.56, -0.59, -0.65, -0.38, -0.7, -0.67, -0.54, -0.64, -0.7, -0.75, -0.85, -0.69, -0.81, -0.58, -0.39, -0.6, -0.4, -0.38, 0.07, -0.19, 0.36, -0.04, 0.46, 0.21, 0.02, -0.03, 0.01, 0.18, 0.24, -0.04, -0.49, 0.01, 0.11, 0.32, 0.62, 0.84, 1.12, 1.43, 2.01, 1.78, 2.09, 2.19, 2.54, 2.32, 2.43, 2.49, 2.18, 2.5, 2.31, 2.46, 2.16, 2.01, 2.38, 2.32, 2.09, 1.56, 1.55, 1.7, 1.59, 1.6, 1.88, 2.39, 2.32, 2.47, 2.46, 2.68, 3.25, 3.47, 3.52, 4.02, 4.43, 4.58, 5.48, 5.77, 6.52, 7.19, 7.74, 8.64, 9.21, 9.78, 10.22, 10.02, 10.09, 10.23, 10.52, 10.55, 10.17, 10.31, 10.43, 10.82, 10.91, 10.96, 10.54, 10.92, 10.78, 10.97, 10.97, 10.94, 11.35, 10.99, 11.06, 11.51, 13.37, 14.5, 15.95, 17.25, 18.03, 18.66, 19.26, 19.74, 19.42, 19.27, 19.08, 18.66, 18.49, 18.4, 17.86, 17.02, 15.77, 15.09, 14.13, 13.34, 12.75, 12.18, 11.47, 11.14, 10.89, 10.41, 9.88, 9.68, 10, 9.51, 9.5, 9.48, 8.93, 8.95, 9.67, 10.23, 10.7, 11.34, 11.42, 11.58, 11.4, 11.32, 10.96, 10.6, 10.5, 10.52, 11.32, 11.5, 12.28, 12.39, 13.16, 13.21, 14.29, 15.22, 16.49, 17.52, 18.04, 18.94, 19.94, 20.38, 20.59, 20.54, 20.53, 20.99, 20.52, 19.61, 18.33, 16.64, 15.58, 14, 12.46, 11.19, 9.55, 7.78, 5.43, 4.73, 5.07, 5.39, 5.94, 6.18, 5.7, 5.12, 4.12, 3.63, 3.57, 3.17, 2.8, 2.54, 2.19, 2.41, 1.67, 1.95, 1.64, 1.28, 0.86, 0.98, 0.37, 0.09, -0.11, -0.36, -0.21, 0.42, 0.82, 0.73, 0.68, 0.41, -0.18, -0.65, -0.61, -1.28, -0.8, -0.69, -0.65, 0.09, 0.06, 0.15, -0.22, -0.9, -1.03, -1.34, -0.94, -0.51, -0.58, 0.05, 0.05, 0.23, -0.03, -0.01, -0.33, 0.04, -0.19, -0.23, -0.94, -1.53, -1.08, -1.24, -0.59, -0.37, 0.1, 0.4, 0.46, 0.2, 0.54, 0.15, 0.46, 0.23, -0.08, -0.18, -0.15, 0.06, -0.15, -0.28, -0.05, -0.11, 0.17, -0.03, -0.21, -0.21, 0.16, -0.12, 0.03, -0.33, 0.12, -0.03, -0.07, -0.33, -0.43, -0.34, -0.58, -0.45, -0.46, -0.36, -0.55, -0.62, -0.71, -0.88, -0.7],
[-0.36, -0.21, -0.44, -0.2, -0.31, -0.06, 0.03, -0.22, -0.45, -0.15, -0.09, -0.36, -0.52, -0.4, -0.14, -0.5, -0.4, -0.6, -0.43, -0.16, -0.36, -0.31, -0.43, -0.69, -0.23, -0.51, -0.46, -0.15, -0.27, -0.09, -0.32, -0.48, -0.22, -0.11, 0.02, 0.01, -0.04, -0.21, -0.27, 0.02, -0.18, -0.21, 0, 0.24, -0.15, 0.33, -0.11, 0.2, 0.27, 0.37, -0.12, -0.05, 0.07, 0.07, 0.11, 0.18, 0.1, 0.04, 0.17, 0.01, 0.09, -0.09, -0.13, 0.12, -0.04, 0.31, 0.34, 0.64, 0.66, 0.34, 0.61, 0.69, 0.57, 0.76, 1.04, 1.06, 1.48, 2.11, 2.2, 2.94, 2.73, 2.91, 3.18, 3.55, 3.79, 3.91, 4.73, 4.97, 6.16, 6.45, 7.26, 7.81, 9.07, 10.7, 12.6, 14.69, 16.83, 18.7, 19.53, 19.09, 18.53, 18.23, 17.36, 17.07, 16.27, 15.99, 15.31, 14.16, 13.03, 11.99, 11.14, 9.97, 9.16, 7.98, 7.39, 6.44, 5.2, 4.34, 3.58, 3.07, 2.41, 1.42, 0.81, 0.02, -0.62, 0.46, 1.08, 2.02, 2.92, 3.65, 5.37, 6.69, 8.41, 10.18, 9.46, 9.01, 8.13, 7.58, 7.32, 6.83, 6.12, 5.31, 5.09, 4.53, 4.45, 5.01, 4.84, 5.49, 5.79, 5.92, 6.11, 4.89, 4.09, 3.81, 2.72, 3.29, 4.63, 5.77, 6.95, 5.14, 4.09, 4.17, 4.39, 4.65, 5.02, 4.74, 5.06, 5.07, 5.9, 6.31, 6.4, 7.29, 7.72, 7.82, 8.65, 9.63, 9.69, 10.11, 10.49, 10.58, 11.17, 11.01, 11.84, 11.87, 13.06, 13.69, 13.73, 14.22, 14.21, 14.74, 15, 14.87, 14.8, 14.62, 13.6, 11.81, 10.44, 8.71, 8.1, 7.55, 7.23, 6.66, 6.02, 5.93, 5.13, 5.38, 5.14, 4.95, 4.48, 3.98, 3.8, 3.06, 2.69, 2.01, 1.15, 0.93, 0.27, 0.36, 0.34, 0.92, 0.84, 0.97, 1.01, 0.7, 0.75, 0.3, 0.25, 0.46, 1.53, 1.52, 1.19, 0.71, 0.57, -0.23, -0.29, -0.45, -0.67, -0.95, -0.64, -0.47, -0.91, -0.77, -0.88, -0.91, -0.82, -0.85, -0.58, -0.4, -0.45, -0.67, -0.56, -0.66, -0.62, -0.62, -0.44, -0.46, -0.45, -0.89, -0.81, -0.8, -0.42, -0.55, -0.78, -0.6, -0.61, -0.57, -0.78, -0.63, -0.42, -0.42, -0.52, -0.55, -0.57, -0.33, -0.43, -0.73, -0.78, -0.79, -0.59, -0.68, -0.34, -0.27, -0.56, -0.36, -0.37, -0.35, -0.43, -0.55, -0.51, -0.45, -0.2, -0.21, -0.47, -1.17, -1.28, -1.45, -0.77, 0.03, 0.47, 1.33],
]
export default {
data
}
HelloWorld.vue
<template>
<div class="hello">
<div class="outbox">
<div class="box1">
<demo/>
</div>
<div class="box2">
</div>
</div>
</div>
</template>
<script>
import demo from './demo'
export default {
name: "HelloWorld",
components:{
demo,
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.hello {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
100vw;
height: 100vh;
/* background-color: aquamarine; */
.outbox {
display: flex;
flex-flow:row nowrap;
justify-content: space-around;
align-items: center;
100vw;
height:100vh;
/* background-color: aquamarine; */
.box1{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
40vw;
height: 60vh;
margin-right: 30px;
background-color: aquamarine;
}
.box2{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
40vw;
height: 60vh;
/* background-color: aquamarine; */
}
}
}
</style>
此实例css用到sass,需安装sass，
1.引入sass全局变量
第一步，安装需要的依赖：
npminstallsass-loader node-sass webpack--save-dev
第二步，我们在 sass 文件中定义变量并将其导出为 js，CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。
// /styles/global.scss
$exportedValue:#ccc;
:export {exportedKey:$exportedValue;
/* ... */
}现在，我们可以在 js 中使用这个变量啦。
// js/test.js
importstylesfrom'/styles/global.scss'
console.log(styles)
参考位置：https://www.cnblogs.com/fayin/p/10510760.html
（
css-modules
sass-resources-loader
how-to-share-variables-between-js-and-sass
）