vue+echarts實(shí)帶漸變效果的折線圖
更新時(shí)間：2022年04月02日 18:07:56 作者：Cherry?
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)帶漸變效果的折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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-07
Vue+webpack實(shí)現(xiàn)懶加載過程解析
這篇文章主要介紹了Vue+webpack實(shí)現(xiàn)懶加載過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了Vue如何獲取數(shù)據(jù)列表展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了如何給element添加一個(gè)抽屜組件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue 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-08
axios取消請(qǐng)求CancelToken的用法示例代碼
Axios提供了取消請(qǐng)求的功能,可以通過使用CancelToken來實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于axios取消請(qǐng)求CancelToken的用法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03