vue+echarts實(shí)帶漸變效果的折線圖
本文實(shí)例為大家分享了vue+echarts實(shí)帶漸變效果折線圖的具體代碼,供大家參考,具體內(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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue2利用echarts繪制折線圖,餅圖和大圖
- echarts折線圖流動(dòng)特效的實(shí)現(xiàn)全過程(非平滑曲線)
- vue+echarts繪制折線圖、柱狀圖和扇形圖教程
- Vue+Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線圖
- Python?pyecharts繪制折線圖詳解
- vue使用echarts實(shí)現(xiàn)折線圖
- vue使用ECharts實(shí)現(xiàn)折線圖和餅圖
- Echarts基本入門之柱狀圖、折線圖通用配置
- echarts折線圖月份數(shù)據(jù)不足自動(dòng)補(bǔ)0和日期達(dá)到數(shù)據(jù)連續(xù)的效果(最新推薦)
相關(guān)文章
vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Vue+webpack實(shí)現(xiàn)懶加載過程解析
這篇文章主要介紹了Vue+webpack實(shí)現(xiàn)懶加載過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02vue el-date-picker動(dòng)態(tài)限制時(shí)間范圍案例詳解
這篇文章主要介紹了vue el-date-picker動(dòng)態(tài)限制時(shí)間范圍案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09解決vue頁(yè)面刷新,數(shù)據(jù)丟失的問題
這篇文章主要介紹了解決vue頁(yè)面刷新,數(shù)據(jù)丟失的問題,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-11-11對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹
今天小編就為大家分享一篇對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08axios取消請(qǐng)求CancelToken的用法示例代碼
Axios提供了取消請(qǐng)求的功能,可以通過使用CancelToken來實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于axios取消請(qǐng)求CancelToken的用法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03