echarts来写曲线图使用一个app容器
引入地址
<script src="./js/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="app">
<div id="main">
<div class="left">
<div ref='chart3' style="height:300px"></div>
</div>
</div>
</div>
Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
el: "#app",
data() {
return {
}
},
mounted() {
this.initChart3()
},
methods: {
initChart3() {
var myChart = echarts.init(this.$refs.chart3);
var option = {
tooltip: {
trigger: 'axis',
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
在 ECharts 2.x 中只支持类目轴上使用 axis
trigger
，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。axisPointer: {
type: 'line' 如果要柱状图的话可以变成bar
}
},
legend: {
icon: "circle",
right: 0
},
grid: {
left: 100,
right: 0,
bottom: 30,
top: 40
},
xAxis: { x轴上的数据
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: 'lightblue',
fontSize: 16
},
data: ["2015", "2016", "2017", "2018", "2019"]
},
color: ['orangered', 'skyblue'],
yAxis: { 同理这是Y轴上的
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
max: 100,
interval: 20,
axisLabel: {
color: 'blue',
formatter(p) {
return p + "%"
},
fontWeight: 'bold'
},
},
series: [{
name: '平均利率',
type: 'line',
data: [30, 46, 60, 50, 70],
smooth: true,
},
{
name: '平均费率',
type: 'line',
data: [40, 26, 40, 32, 35],
smooth: true,
}]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize()
})
}
}
