vue echart折线图,echarts的折线图

　　这篇文章主要为大家详细介绍了某视频剪辑软件使用展示实现折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件使用展示实现折线图的具体代码，供大家参考，具体内容如下

　　效果图：

　　代码：

　　模板

　　div class= proCharts ref= charts

　　/div

　　/模板

　　脚本

　　从《埃查尔兹》/NPM导入电子图表安装echarts@4.9.0

　　导出默认值{

　　data () {

　　返回{

　　选项：{

　　颜色：[rgb(8，252，7 ， rgb(255，168，0 ，]，

　　标题：{

　　文本：""

　　},

　　工具提示：{ //提示框

　　触发器："轴",

　　},

　　图例：{//图例的类型

　　图标： roundRect ，//图例图标图标

　　数据：[

　　{

　　名称：上年，

　　textStyle: {

　　颜色： #fff

　　}

　　},{

　　名称：本年，

　　textStyle: {

　　颜色： #fff

　　}

　　},

　　],

　　},

　　网格：{

　　左："3%",

　　对："4%",

　　底部："3%",

　　顶部："17%",

　　包含标签:true//网格区域是否包含坐标轴的刻度标签

　　},

　　xAxis: {

　　类型："类别",//坐标轴类型。

　　boundaryGap: false，//坐标轴两边留白策略

　　数据：[1月, 2月, 3月, 4月, 5月, 6月, 7月,8月,9月,10月,11月,12月],

　　axisLabel: {//坐标轴刻度标签的相关设置

　　间隔：0,

　　textStyle: {

　　颜色： #fff ，

　　字体大小：10

　　},

　　},

　　轴线：{//坐标轴轴线相关设置

　　秀：真的，

　　线型：{

　　颜色：" rgb(2，121，253)"

　　}

　　},

　　轴棒：{ //坐标轴刻度相关设置。

　　秀：假的，

　　}

　　},

　　亚西斯：{

　　类型："值",

　　axisLabel: { //x轴的坐标文字

　　秀：真的，

　　textStyle: {

　　颜色： #fff //文字的颜色

　　},

　　},

　　最大值：100,//最大值100

　　轴线：{//坐标轴轴线相关设置

　　秀：真的，

　　线型：{

　　颜色：" rgb(2，121，253)"

　　}

　　},

　　轴棒：{ //坐标轴刻度相关设置。

　　秀：假的，

　　},

　　分割线：{ //坐标在格子区域的分割线

　　线型：{ //设置分割线的样式（图表横线颜色)

　　颜色：[#153a8a]

　　}

　　}

　　},

　　系列：[

　　{

　　名称： 上年，

　　类型："行",

　　数据：[10,20,30,50,50,10,50,60,10,50,10,30],

　　线型：{

　　颜色： rgb(8，252，7) //线的颜色

　　}

　　},

　　{

　　名称： 本年，

　　类型："行",

　　数据：[20,20,30,50,50,10,50,20,30,50,50,30],

　　线型：{

　　颜色： rgb(255，168，0) //线的颜色

　　}

　　}

　　]

　　}

　　}

　　},

　　已创建(){

　　},

　　已安装(){

　　this.mycharts()

　　},

　　方法：{

　　我的图表(){

　　let myChart=echarts.init(this .$refs.charts，马卡龙);

　　myChart.setOption(this.option)

　　//图表自适应

　　窗户。addevent侦听器( resize ，function(){

　　myChart.resize() //myChart是实例对象

　　})

　　}

　　}

　　}

　　/脚本

　　样式范围。proCharts{

　　宽度：100%;

　　高度：400像素

　　背景：rgb(14，51，129)；

　　}

　　/风格

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。