vue+echarts實帶漸變效果的折線圖
更新時間:2022年04月02日 18:07:56 作者:Cherry?
這篇文章主要為大家詳細介紹了vue+echarts實帶漸變效果的折線圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue+echarts實帶漸變效果折線圖的具體代碼,供大家參考,具體內(nèi)容如下
1、安裝echarts
npm install echarts --save
2、引入echarts
import echarts from "echarts"; //修改原型鏈,可在全局使用 Vue.prototype.$echarts = echarts;
3、創(chuàng)建圖表 首先需要在 HTML 中創(chuàng)建圖表的容器
<div id="echarts_coverage"></div> // css ?圖表的容器必須指定寬高 #echarts_coverage{ ?? ? ?width: 400px; ?? ? ?height: 200px; }
4、渲染圖表
<script> export default { ? mounted() { ? ? this.initLineChart(); ? }, ? methods: { ? ? initLineChart() { ? ? ? let data = [ ? ? ? ? { ? ? ? ? ? dateStr: "2019第1季度", ? ? ? ? ? numberStr: 10, ? ? ? ? }, ? ? ? ? { ? ? ? ? ? dateStr: "2019第1季度", ? ? ? ? ? numberStr: 50, ? ? ? ? }, ? ? ? ? { ? ? ? ? ? dateStr: "2019第1季度", ? ? ? ? ? numberStr: 35, ? ? ? ? }, ? ? ? ? { ? ? ? ? ? dateStr: "2019第1季度", ? ? ? ? ? numberStr: 92, ? ? ? ? }, ? ? ? ? { ? ? ? ? ? dateStr: "2019第1季度", ? ? ? ? ? numberStr: 70, ? ? ? ? }, ? ? ? ? { ? ? ? ? ? dateStr: "2019第1季度", ? ? ? ? ? numberStr: 80, ? ? ? ? }, ? ? ? ]; ? ? ? let lineData = {}; ? ? ? lineData.label = data.map((item) => item.dateStr); ? ? ? lineData.data = data.map((item) => item.numberStr); ? ? ? let chart = this.$echarts.init( ? ? ? ? document.getElementById("echarts_coverage") ? ? ? ); ? ? ? let option = { ? ? ? ? color: ["#3DB821"], ? ? ? ? tooltip: { ? ? ? ? ? trigger: "axis", ? ? ? ? }, ? ? ? ? grid: { ? ? ? ? ? left: "3%", ? ? ? ? ? right: "5%", ? ? ? ? ? bottom: "8%", ? ? ? ? ? top: "20%", ? ? ? ? ? containLabel: true, ? ? ? ? }, ? ? ? ? xAxis: { ? ? ? ? ? type: "category", ? ? ? ? ? offset: 6, ? ? ? ? ? axisLine: { lineStyle: { color: " #CCCCCC" } }, ? ? ? ? ? axisTick: { ? ? ? ? ? ? show: false, ? ? ? ? ? }, ? ? ? ? ? axisLabel: { ? ? ? ? ? ? interval: 0, ? ? ? ? ? ? rotate: 18, ? ? ? ? ? ? textStyle: { ? ? ? ? ? ? ? color: "#000", ? ? ? ? ? ? ? fontStyle: "normal", ? ? ? ? ? ? ? fontFamily: "微軟雅黑", ? ? ? ? ? ? ? fontSize: 13, ? ? ? ? ? ? ? margin: 10, ? ? ? ? ? ? }, ? ? ? ? ? }, ? ? ? ? ? data: lineData.label, ? ? ? ? }, ? ? ? ? yAxis: { ? ? ? ? ? type: "value", ? ? ? ? ? name: "(%)", ? ? ? ? ? nameTextStyle: { ? ? ? ? ? ? align: "right", ? ? ? ? ? ? color: "#4D4D4D", ? ? ? ? ? }, ? ? ? ? ? axisLine: { ? ? ? ? ? ? show: false, ? ? ? ? ? ? lineStyle: { color: "#CCCCCC" }, ? ? ? ? ? }, ? ? ? ? ? axisTick: { show: false }, ? ? ? ? ? splitLine: { ? ? ? ? ? ? show: true, ? ? ? ? ? ? lineStyle: { type: "dashed", color: "#CCCCCC" }, ? ? ? ? ? }, ? ? ? ? ? axisLabel: { ? ? ? ? ? ? textStyle: { ? ? ? ? ? ? ? color: "#4D4D4D", ? ? ? ? ? ? ? fontSize: 14, ? ? ? ? ? ? }, ? ? ? ? ? }, ? ? ? ? }, ? ? ? ? series: [ ? ? ? ? ? { ? ? ? ? ? ? name: "數(shù)量", ? ? ? ? ? ? type: "line", ? ? ? ? ? ? stack: "總量", ? ? ? ? ? ? // symbol: "circle", ? ? ? ? ? ? symbolSize: 8, ? ? ? ? ? ? minInterval: 6, ? ? ? ? ? ? data: lineData.data, ? ? ? ? ? ? smooth: false, ? ? ? ? ? ? areaStyle: { ? ? ? ? ? ? ? normal: { ? ? ? ? ? ? ? ? color: { ? ? ? ? ? ? ? ? ? x: 0, ? ? ? ? ? ? ? ? ? y: 0, ? ? ? ? ? ? ? ? ? x2: 0, ? ? ? ? ? ? ? ? ? y2: 1, ? ? ? ? ? ? ? ? ? colorStops: [ ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? offset: 0, ? ? ? ? ? ? ? ? ? ? ? color: "#3DB821", // 0% 處的顏色 ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? offset: 0.5, ? ? ? ? ? ? ? ? ? ? ? color: "rgba(51,180,21,.5)", // 100% 處的顏色 ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? offset: 1, ? ? ? ? ? ? ? ? ? ? ? color: "rgba(51,180,21,.1)", // 100% 處的顏色 ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ? ? globalCoord: false, // 缺省為 false ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? }, ? ? ? ? ? ? }, ? ? ? ? ? }, ? ? ? ? ], ? ? ? }; ? ? ? chart.setOption(option); ? ? }, ? }, }; </script>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法
這篇文章主要為大家詳細介紹了vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07vue el-date-picker動態(tài)限制時間范圍案例詳解
這篇文章主要介紹了vue el-date-picker動態(tài)限制時間范圍案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09對Vue2 自定義全局指令Vue.directive和指令的生命周期介紹
今天小編就為大家分享一篇對Vue2 自定義全局指令Vue.directive和指令的生命周期介紹,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08