vue echart折线图,echarts折线图实例
这篇文章主要为大家详细介绍了vue echarts实带渐变效果的折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue echarts实带渐变效果折线图的具体代码，供大家参考，具体内容如下
1、安装echarts
新公共管理安装电子图表-保存
2、引入echarts
从“电子海图”导入电子海图；
//修改原型链，可在全局使用
vue。原型。$ e图表=e图表；
3、创建图表 首先需要在 HTML 中创建图表的容器
div id=echarts_coverage/div
//css图表的容器必须指定宽高
#echarts_coverage{
宽度：400像素
高度：200像素
}
4、渲染图表
脚本
导出默认值{
已安装(){
这个。initlinechart()；
},
方法：{
initLineChart() {
let data=[
{
日期："2019年"第一季度，
数字字符串：10
},
{
日期："2019年"第一季度，
numberStr: 50，
},
{
日期："2019年"第一季度，
numberStr: 35，
},
{
日期："2019年"第一季度，
数字字符串：92,
},
{
日期："2019年"第一季度，
数字字符串：70,
},
{
日期："2019年"第一季度，
数字字符串：80,
},
];
设行数据={ }；
行数据。标签=数据。map((item)=item。datestr)；
行数据。数据=数据。map((item)=item。numberstr)；
让图表=这个. echarts.init(
文档。getelementbyid( e charts _ coverage )
);
let option={
颜色：[#3DB821]，
工具提示：{
触发器："轴",
},
网格：{
左："3%",
对："5%",
底部："8%",
顶部："20%",
containLabel: true，
},
xAxis: {
类型："类别",
偏移量：6,
轴线：{线条样式：{颜色： # CCCCCC } }，
轴棒：{
秀：假的，
},
axisLabel: {
间隔：0,
旋转：18度，
textStyle: {
颜色： #000 ,
字体样式：正常，
fontFamily:微软雅黑，
fontSize: 13，
边距：10,
},
},
数据：lineData.label，
},
亚西斯：{
类型："值",
名称："(%)",
nameTextStyle: {
对齐："右",
颜色： #4D4D4D ，
},
轴线：{
秀：假的，
线条样式：{ color: #CCCCCC }，
},
轴棒：{ show: false }，
分割线：{
秀：真的，
线条样式：{类型： 虚线，颜色： #CCCCCC }，
},
axisLabel: {
textStyle: {
颜色： #4D4D4D ，
fontSize: 14，
},
},
},
系列：[
{
名称： 数量，
类型："行",
堆栈： 总量，
//符号：圆形，
symbolSize: 8，
minInterval: 6，
数据：lineData.data，
光滑：假的，
区域样式：{
正常：{
颜色：{
x: 0，
y: 0，
x2: 0，
y2: 1，
色彩停止点：[
{
偏移量：0,
颜色： #3DB821 ，//0%处的颜色
},
{
偏移量：0.5,
颜色： rgba(51，180，21，5),//100%处的颜色
},
{
偏移量：1,
颜色： rgba(51，180，21，1),//100%处的颜色
},
],
globalCoord: false，//缺省为错误的
},
},
},
},
],
};
chart.setOption(选项);
},
},
};
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。