本篇内容主要讲解“vue+echarts怎么实带渐变效果的折线图”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue+echarts怎么实带渐变效果的折线图”吧!
效果如下：
1、安装echarts
计算
安全
数据库
网络和加速
企业服务
npm install echarts --save2、引入echarts
import echarts from "echarts";
//修改原型链,可在全局使用
Vue.prototype.$echarts = echarts;3、创建图表 首先需要在 HTML 中创建图表的容器
<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: "数量",
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>到此，相信大家对“vue+echarts怎么实带渐变效果的折线图”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
