echarts柱状图和折线图组合,vue echart折线图

　　这篇文章主要为大家详细介绍了Vue Echarts实现柱状折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了Vue Echarts实现柱状折线图的具体代码，供大家参考，具体内容如下

　　某视频剪辑软件处理数据数据渲染柱状折线图

　　HTML:

　　div id= lineCharts style= width:100%；高度：500像素上边距：20像素/格

　　JS:

　　drawLineCharts() {

　　let data={sid: 02fertdfg0221 ，choose: 1，}；//这里是接口的传参

　　爱可信。请求({

　　url: url，//接口地址

　　方法： POST ，

　　数据：JSON.stringify(数据),

　　})。然后((res)={

　　let dateData=[]；//日期

　　设排名数据=[]；//排行

　　let评论数据=[]；//销量

　　放出数据=JSON。stringify(研究结果)；//数据

　　设xqo=eval(( out data ))；//转换类型

　　对于(xqo中的变量I){//分别获取日期排行和销量的数组值

　　dateData.push(xqo[i].create_time.substring(0，10))；

　　commentsData.push(xqo[i]).评论_值);

　　rankingData.push(xqo[i]).排名);

　　}

　　这个。图表饼图=电子图表。init(文档。getelementbyid( line charts )；//表格编号

　　this.chartPie.setOption({

　　标题：{

　　文本： ,

　　},

　　工具提示：{

　　触发器："轴",

　　axisPointer: {

　　//坐标轴指示器，坐标轴触发有效

　　类型：阴影，//默认为直线，可选为：线条 阴影

　　},

　　},

　　图例：{

　　方向："水平",

　　数据：[热度, 销量],

　　},

　　网格：{

　　x: 46，

　　y: 35，

　　x2: 37，

　　y2: 40，

　　边框宽度：0,

　　},

　　可计算的：真，

　　xAxis: [

　　{

　　类型："类别",

　　数据：日期数据，

　　分割线：{

　　秀：假的，

　　},

　　axisLabel: {

　　秀：真的，

　　边距：20,

　　textStyle: {

　　颜色： #a4a7ab ，

　　对齐："居中",

　　},

　　},

　　},

　　],

　　亚西斯：[

　　{

　　名称： 销量趋势，

　　类型："值",

　　分割线：{

　　秀：假的，

　　},

　　axisLabel: {

　　秀：真的，

　　textStyle: {

　　颜色： #a4a7ab ，

　　},

　　},

　　//min: 100，

　　},

　　{

　　名称： 热度排名，

　　类型："值",

　　位置："右侧",

　　分割线：{

　　秀：假的，

　　},

　　axisLabel: {

　　秀：真的，

　　格式化程序：" {value} "，

　　textStyle: {

　　颜色： #a4a7ab ，

　　},

　　},

　　},

　　],

　　系列：[

　　{

　　名称： 热度，

　　类型："条形",

　　酒吧宽度： 20 ,

　　数据：rankingData，

　　项目样式：{

　　正常：{

　　barBorderRadius: 5，

　　颜色： #36A1DB ，

　　},

　　},

　　},

　　{

　　名称： 销量，

　　类型："行",

　　//smooth: true，

　　showAllSymbol:真的，

　　符号：“emptyCircle”，

　　symbolSize: 5，

　　yAxisIndex: 1，

　　数据：评论数据，

　　项目样式：{

　　正常：{

　　颜色： #EEAB56 ，

　　},

　　},

　　},

　　],

　　});

　　});

　　},

　　最后就是效果图：

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

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