vue+echarts實帶漸變效果的折線圖

更新時間：2022年04月02日 18:07:56 作者：Cherry?

這篇文章主要為大家詳細介紹了vue+echarts實帶漸變效果的折線圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+echarts實帶漸變效果折線圖的具體代碼，供大家參考，具體內容如下

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>

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

您可能感興趣的文章: