vue使用echarts實現(xiàn)折線圖

更新時間：2022年03月21日 15:56:39 作者：面向?qū)ο蟆?

這篇文章主要為大家詳細介紹了vue使用echarts實現(xiàn)折線圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue使用echarts實現(xiàn)折線圖的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

代碼：

<template>
? ? ? ? ? ? <div class="proCharts" ref='charts'>
? ? ? ? ? ? </div>
</template>

<script>
import echarts from 'echarts' ? //npm install echarts@4.9.0
export default {
? ? data () {
? ? ? ? return {
? ? ? ? ? ? option:{
? ? ? ? ? ? ? ? ? ? color:['rgb(8,252,7)','rgb(255,168,0)',],
? ? ? ? ? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? ? ? ? ? text: ''
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? tooltip: { //提示框
? ? ? ? ? ? ? ? ? ? ? ? trigger: 'axis',
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? legend: {//圖例的類型
? ? ? ? ? ? ? ? ? ? ? ? icon:'roundRect',//圖例icon圖標
? ? ? ? ? ? ? ? ? ? ? ? data: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name:"上年",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#fff'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name:"本年",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#fff'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? grid: {
? ? ? ? ? ? ? ? ? ? ? ? left: '3%',
? ? ? ? ? ? ? ? ? ? ? ? right: '4%',
? ? ? ? ? ? ? ? ? ? ? ? bottom: '3%',
? ? ? ? ? ? ? ? ? ? ? ? top:'17%',
? ? ? ? ? ? ? ? ? ? ? ? containLabel: true //grid區(qū)域是否包含坐標軸的刻度標簽
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? xAxis: {
? ? ? ? ? ? ? ? ? ? ? ? type: 'category', //坐標軸類型。
? ? ? ? ? ? ? ? ? ? ? ? boundaryGap: false, //坐標軸兩邊留白策略
? ? ? ? ? ? ? ? ? ? ? ? data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
? ? ? ? ? ? ? ? ? ? ? ? axisLabel: {//坐標軸刻度標簽的相關設置
? ? ? ? ? ? ? ? ? ? ? ? ? ? interval:0,
? ? ? ? ? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#fff',
? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize :10
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? axisLine:{//坐標軸軸線相關設置
? ? ? ? ? ? ? ? ? ? ? ? ? ? show :true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'rgb(2,121,253)'
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? axisTick:{ //坐標軸刻度相關設置。
? ? ? ? ? ? ? ? ? ? ? ? ? ? show :false,
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? yAxis: {
? ? ? ? ? ? ? ? ? ? ? ? type: 'value',
? ? ? ? ? ? ? ? ? ? ? ? axisLabel: { //x軸的坐標文字
? ? ? ? ? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#fff' //文字的顏色
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? max:100,//最大值100
? ? ? ? ? ? ? ? ? ? ? ? axisLine:{//坐標軸軸線相關設置
? ? ? ? ? ? ? ? ? ? ? ? ? ? show :true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'rgb(2,121,253)'
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? axisTick:{ //坐標軸刻度相關設置。
? ? ? ? ? ? ? ? ? ? ? ? ? ? show :false,
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? splitLine:{ ?//坐標在grid區(qū)域的分割線
? ? ? ? ? ? ? ? ? ? ? ? 　?lineStyle: { //設置分割線的樣式(圖表橫線顏色)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: ['#153a8a']
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? series: [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? name: '上年',
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'line',
? ? ? ? ? ? ? ? ? ? ? ? ? ? data: [10,20,30,50,50,10,50,60,10,50,10,30],
? ? ? ? ? ? ? ? ? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'rgb(8,252,7)' ?//線的顏色
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? name: '本年',
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'line',
? ? ? ? ? ? ? ? ? ? ? ? ? ? data: [20,20,30,50,50,10,50,20,30,50,50,30],
? ? ? ? ? ? ? ? ? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'rgb(255,168,0)' //線的顏色
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? created () {
? ? ? ??
? ? },
? ? mounted () {
? ? ? ? this.mycharts()
? ? },
? ? methods: {
? ? ? ? mycharts(){
? ? ? ? ? ? let myChart =echarts.init(this.$refs.charts,"macarons");
? ? ? ? ? ? myChart.setOption(this.option)
? ? ? ? ? ? //圖表自適應
? ? ? ? ? ? window.addEventListener("resize",function(){
? ? ? ? ? ? ? ? myChart.resize() ?// myChart 是實例對象
? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>

<style scoped>
.proCharts{
? ? width: 100%;
? ? height: 400px;
? ? background: rgb(14, 51, 129);
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: