vue echarts图表,echarts 立体柱状图

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

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

　　预览：

　　代码：

　　页面部分：

　　模板

　　div class= roadnum-all ref= roadnumall

　　div id=roadnum ref=dom/div

　　/div

　　/模板

　　半铸钢钢性铸铁(铸造半钢)部分：roadnum-all {

　　宽度：100%;

　　身高：100%;/*填满父级容器*/

　　}

　　射流研究…部分：

　　从电子海图//导入展示引入展示

　　导出默认值{

　　名称： ltzzt ，

　　data() {

　　返回{

　　数据：[],

　　dom:空

　　}

　　},

　　已安装(){

　　这个. nextTick(()={ //给图标宽高使图标填满容器

　　文档。getelementbyid( roadnum )。风格。宽度=这个.$参考文献。roadnumall。偏移量宽度“px”；

　　文档。getelementbyid( roadnum )。风格。身高=这个。$参考文献。roadnumall。偏移高度“px”；

　　这个。draw()；

　　})

　　},

　　方法：{

　　//画图

　　draw() {

　　//网络请求假装从后端拿回来的数据

　　this.data=[

　　{姓名： 京哈高速，值：10 },

　　{姓名： 京哈高速1 ,值：20 },

　　{姓名： 京哈高速2 ,值：30 },

　　{姓名： 京哈高速3 ,值：40 },

　　{姓名： 京哈高速4 ,值：50 },

　　{姓名： 京哈高速5 ,值：60 },

　　{姓名： 京哈高速6 ,值：70 },

　　{姓名： 京哈高速7 ,值：80 },

　　{姓名： 京哈高速8 ,值：90 },

　　{姓名： 京哈高速9 ,值：100 },

　　{姓名： 京哈高速10 ,值：110 },

　　{姓名： 京哈高速11 ,值：120 }

　　];

　　//拼轴显示和数据的数组

　　设xAxisText=[]；

　　让dataList=[]；

　　this.data.forEach(item={

　　xaxistext。推(项。姓名)；

　　dataList.push(item.value)

　　})

　　//从这里开始创建自定义图形—— 长方体的正面

　　var MyCubeRect=echarts。图形。扩展形状({

　　形状：{

　　x: 0，

　　y: 0，

　　宽度：180,//长方体宽度

　　zWidth: 8，//阴影折角宽

　　zHeight: 4 //阴影折角高

　　},

　　buildPath: function (ctx，shape) {

　　console.log(ctx，shape)；

　　const api=shape.api

　　const xAxisPoint=API。坐标([形状。xvalue，0])；

　　const p0=[shape.x，shape。y]；

　　常量P1=[形状。x形。宽度/xaxistext。长度，形状。y]；

　　常量P4=[形状。x形。宽度/xaxistext。长度，形状。y]；

　　const p2=[xAxisPoint[0]-shape。宽度/xaxistext。length，xAxisPoint[1]]；

　　常量P3=[xAxisPoint[0]shape。宽度/xaxistext。length，xAxisPoint[1]]；

　　ctx.moveTo(p0[0]，P0[1])；//0

　　ctx.lineTo(p1[0]，P1[1])；//1

　　ctx.lineTo(p2[0]，p2[1])；//2

　　ctx.lineTo(p3[0]，P3[1])；//3

　　ctx.lineTo(p4[0]，P4[1])；//4

　　ctx.lineTo(p0[0]，P0[1])；//0

　　CTX。关闭路径()；

　　}

　　})

　　//创建第二个自定义图形—— 长方体的上面和侧面

　　var我的立方体阴影=echarts。图形。扩展形状({

　　形状：{

　　x: 0，

　　y: 0，

　　宽度：180,

　　zWidth: 8，

　　zHeight: 4

　　},

　　buildPath: function (ctx，shape) {

　　const api=shape.api

　　const xAxisPoint=API。坐标([形状。xvalue，0])；

　　const p0=[shape.x，shape。y]；

　　常量P1=[形状。x形。宽度/xaxistext。长度，形状。y]；

　　常量P4=[形状。x形。宽度/xaxistext。长度，形状。y]；

　　常量P6=[形状。x形。宽度/xaxistext。长度形状。z宽度，形状。y形。zheight]；

　　const p7=[shape。x形。宽度/xaxistext。长度形状。z宽度，形状。y形。zheight]；

　　常量P3=[xAxisPoint[0]shape。宽度/xaxistext。length，xAxisPoint[1]]；

　　const P5=[xAxisPoint[0]shape。宽度/xaxistext。长度形状。zwidth，xAxisPoint[1]-shape。zheight]；

　　ctx.moveTo(p4[0]，P4[1])；//4

　　ctx.lineTo(p3[0]，P3[1])；//3

　　ctx.lineTo(p5[0]，P5[1])；//5

　　ctx.lineTo(p6[0]，P6[1])；//6

　　ctx.lineTo(p4[0]，P4[1])；//4

　　ctx.moveTo(p4[0]，P4[1])；//4

　　ctx.lineTo(p6[0]，P6[1])；//6

　　ctx.lineTo(p7[0]，p7[1])；//7

　　ctx.lineTo(p1[0]，P1[1])；//1

　　ctx.lineTo(p4[0]，P4[1])；//4

　　CTX。关闭路径()；

　　}

　　});

　　电子海图。图形。注册形状( mycuberec ，mycuberec)；

　　埃查尔兹。图形。注册形状( mycubeshawk ，mycubeshawk)；

　　常量选项={

　　颜色：[#33b56a ， #fdcf5c ， #4c90ff ， #fe7b7a ， #69ccf6 ， #a38bf8 ， #ff9561 ， #8cb0ea ， #fe81b4 ， #ffb258]，

　　标题：{

　　文本： 验算路线排行榜，

　　左：20,

　　顶部：20

　　},

　　图例：{

　　秀：真的，

　　顶部：25

　　},

　　网格：{

　　左："3%",

　　对："4%",

　　顶部："15%",

　　底部："3%",

　　containLabel: true

　　},

　　xAxis: {

　　类型："类别",

　　数据：xAxisText，

　　边界差距：没错，

　　间隔：0,

　　axisLabel: {

　　颜色： #333 ,

　　//让x轴文字方向为竖向

　　间隔：0,

　　格式化程序：函数（值){

　　返回值。拆分(" ").加入( \n )

　　}

　　}

　　},

　　亚西斯：{

　　类型："值"

　　},

　　工具提示：{

　　触发器："轴",

　　axisPointer: {

　　类型："阴影"

　　},

　　},

　　系列：[{

　　名称： 次数，

　　类型："自定义",

　　renderItem: (params，api)={

　　设位置=API。coord([API。值(0)，API。值(1)])；

　　返回{

　　类型："组",

　　孩子：[{

　　类型： MyCubeRect ，

　　形状：{

　　api，

　　xValue: api.value(0)，

　　yValue: api.value(1)，

　　x:位置[0],

　　y:位置[1]

　　},

　　style: api.style()，//api.style()——继承原本的样式

　　}, {

　　类型：我的立方体阴影，

　　形状：{

　　api，

　　xValue: api.value(0)，

　　yValue: api.value(1)，

　　x:位置[0],

　　y:位置[1]

　　},

　　风格：{

　　fill: api.style()，

　　文本： //继承原本样式的基础上将标签清空如果不清空生成的图上会显示两个重叠的标签

　　}

　　}]

　　}

　　},

　　堆栈： 总量，

　　标签:{

　　秀：真的，

　　位置："顶部",

　　颜色： #333 ,

　　格式化程序：` {c}次`,

　　fontSize: 16，

　　距离：15

　　},

　　项目样式：{

　　正常：{

　　color: (params)={

　　//使每根柱子颜色都不一样

　　let colorList=[#33b56a ， #fdcf5c ， #4c90ff ， #fe7b7a ， #69ccf6 ， #a38bf8 ， #ff9561 ， #8cb0ea ， #fe81b4 ， # FFB 258 ]；

　　if(params。数据索引1=颜色列表。长度){

　　返回颜色列表[params.dataIndex]

　　}否则{

　　//如果柱子的数量超过颜色数组就从头再来一遍

　　返回颜色列表[参数。dataindex-colorList。长度]

　　}

　　}

　　}

　　},

　　数据：数据列表

　　}]

　　};

　　this.dom=echarts.init(this .$参考文献。DOM)；

　　this.dom.setOption(选项，真)

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

　　如果(文档。getelementbyid( roadnum )此.$refs.roadnumall) {

　　文档。getelementbyid(道路号).删除属性( _ echarts _ instance _ )；

　　文档。getelementbyid( roadnum )。风格。宽度=这个.$参考文献。roadnumall。偏移量宽度“px”；

　　文档。getelementbyid( roadnum )。风格。身高=这个。$参考文献。roadnumall。偏移高度“px”；

　　这个。多姆。resize()；

　　}

　　});

　　}

　　}

　　}

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

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