手机网站html5,凡科网怎么建网站,wordpress 加宽文章页,合肥市门窗工程在哪个网站接活做目录
一、准备工作
1.下载引入ECharts库
2.创建容器
二、绘制基本柱状
三、绘制立体柱状方法一
1.定义立方体形状
2.注册立方体形状
3.配置custom系列
4.设置数据
5.渲染图表
四、绘制立体柱状方法二
1.画前知识
2.计算坐标renderItem 函数
#xff08;1#x…目录
一、准备工作
1.下载引入ECharts库
2.创建容器
二、绘制基本柱状
三、绘制立体柱状方法一
1.定义立方体形状
2.注册立方体形状
3.配置custom系列
4.设置数据
5.渲染图表
四、绘制立体柱状方法二
1.画前知识
2.计算坐标renderItem 函数
1type: custom
2renderItem 函数
3坐标转换
4自定义图形
5多边形polygon
6绘制点形成图形 一、准备工作
1.下载引入ECharts库 npm install echarts import * as echarts from echarts; 2.创建容器
在HTML中创建一个用于容纳图表的容器例如一个div元素。 div idbarchart/div 二、绘制基本柱状 绘制基本柱状图样式修改成想要的。
xAxis 对象定义了 X 轴的配置包括轴标签axisLabel、轴线axisLine、轴刻度axisTick等。这里设置了标签颜色、标签旋转角度、轴线颜色并隐藏了轴刻度。
yAxis 对象定义了 Y 轴的配置与 X 轴类似包括轴标签、轴线、轴刻度以及分割线splitLine的配置。
直接上代码
mounted() {this.getbarchart();
}, getbarchart() {let barchartDom document.getElementById(barchart);this.barchart echarts.init(barchartDom);let option {color: [#3398DB],xAxis: {data: [两卡人员,前科人员,地方摸排,机场拦截,边境拦截,限制出境,缅北人员],axisLabel: {color: #8CBAEE,rotate: -60},axisLine: {lineStyle: {color: #8CBAEE}},axisTick: {show: false}},yAxis: {axisLabel: {color: #8CBAEE},axisLine: {lineStyle: {color: #8CBAEE}},axisTick: {show: false},splitLine: {lineStyle: {color: #0B0842}}},// 基础柱状图series: [{type: bar,// type: custom,barWidth: 30%,data: [120, 100, 199, 311, 400, 238, 140],itemStyle: {// 设置渐变色color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: #387BFE },{ offset: 1, color: #7CB1FD }])},},]};option this.barchart.setOption(option);},
三、绘制立体柱状方法一
使用echarts.graphic.extendShape|registerShape大概步骤如下
1.定义立方体形状
使用echarts.graphic.extendShape方法来定义一个新的立方体形状。在这个方法中传入一个对象该对象包含shape属性和buildPath方法。shape属性用于定义立方体的形状属性如坐标、大小等而buildPath方法则用于定义绘制立方体路径的逻辑。
2.注册立方体形状
使用echarts.graphic.registerShape方法来注册你定义的立方体形状就可以在custom系列中使用这个形状了。
3.配置custom系列
在ECharts的配置项中添加一个custom系列的配置。在renderItem函数中你可以使用你注册的立方体形状来绘制每个数据项对应的立方体。
4.设置数据
为custom系列设置数据每个数据项将对应一个立方体。
5.渲染图表
调用ECharts实例的setOption方法来应用配置并渲染图表。
我觉得这位大大写的很nice可参考博客03-echarts如何画立体柱状图_echarts立体柱状图-CSDN博客
四、绘制立体柱状方法二
自定义type: custom及多边形polygon
1.画前知识
可查看博客第二部分03-echarts如何画立体柱状图_echarts立体柱状图-CSDN博客
2.计算坐标renderItem 函数
1type: custom
因为我们要自定义形状所以用type: bar已不合适用custom自定义系列
2renderItem 函数
renderItem 是一个函数它接收两个参数params 和 api。
params: 通常包含当前渲染的数据项的信息但在自定义系列中它的使用可能不频繁。
api: 提供了一系列的方法和属性用于访问当前数据点的信息、坐标转换、绘制图形等。
3坐标转换
使用api.coord方法将当前数据点的数值坐标转换为屏幕坐标
api.value(0)通常是X轴的值
api.value(1)是Y轴的值
api.coord([api.value(0), 0])[1]; 获取Y轴为0时的屏幕坐标即X轴上的点用于绘制图形的底部。 4自定义图形
返回一个对象指定了要渲染的图形类型type: group和子元素children。type: group: 表示这是一个图形组可以包含多个子图形。children: 是一个数组包含了要渲染的子图形多边形polygon。
5多边形polygon
type: polygon: 指定这是一个多边形。
shape: 定义了多边形的形状通过points数组给出多边形的顶点坐标。顶点坐标是通过之前计算的屏幕坐标加减一些偏移量来确定的。
style: 定义了多边形的样式。fill: 使用线性渐变填充多边形。new echarts.graphic.LinearGradient(...)创建了一个线性渐变对象指定了渐变的方向、起始颜色和结束颜色。
6绘制点形成图形
左侧
左上点: [基础X轴坐标点-侧面宽度顶部Y轴坐标点-斜角高度]
左下点[基础X轴坐标点-侧面宽度底部Y轴坐标点]
右下点[基础X轴坐标点底部Y轴坐标点]
右下点[基础X轴坐标点顶部Y轴坐标点] 右侧
左上点: [基础X轴坐标点顶部Y轴坐标点]
左下点[基础X轴坐标点底部Y轴坐标点]
右下点[基础X轴坐标点 侧面宽度 底部Y轴坐标点]
右下点[基础X轴坐标点 侧面宽度顶部Y轴坐标点 - 斜角高度] 顶部菱形
中下点: [基础X轴坐标点顶部Y轴坐标点]
右点[基础X轴坐标点侧面宽度顶部Y轴坐标点- 斜角高度]
中上点[基础X轴坐标点 顶部Y轴坐标点- 斜角高度*2]
左点[基础X轴坐标点 -侧面宽度顶部Y轴坐标点 - 斜角高度] 完成代码如下 getbarchart() {let barchartDom document.getElementById(barchart);this.barchart echarts.init(barchartDom);let option {color: [#3398DB],xAxis: {data: [两卡人员,前科人员,地方摸排,机场拦截,边境拦截,缅北人员],axisLabel: {color: #8CBAEE,rotate: -60},axisLine: {lineStyle: {color: #8CBAEE}},axisTick: {show: false}},yAxis: {axisLabel: {color: #8CBAEE},axisLine: {lineStyle: {color: #8CBAEE}},axisTick: {show: false},splitLine: {lineStyle: {color: #0B0842}}},// 立方体柱状series: [{type: custom,data: [120, 24, 90, 311, 400, 238, 100],renderItem: (params, api) {const basicsCoord api.coord([api.value(0), api.value(1)]);const topBasicsYAxis basicsCoord[1];const basicsXAxis basicsCoord[0];const bottomYAxis api.coord([api.value(0), 0])[1];return {type: group,children: [// 左侧{type: polygon,shape: { points: [[basicsXAxis-10, topBasicsYAxis-4], [basicsXAxis-10, bottomYAxis], [basicsXAxis, bottomYAxis], [basicsXAxis, topBasicsYAxis]]},style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: #387BFE },{ offset: 1, color: #7CB1FD }])}},// 右侧{type: polygon,shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis, bottomYAxis],[basicsXAxis10, bottomYAxis],[basicsXAxis10, topBasicsYAxis-4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: #387BFE },{ offset: 1, color: #7CB1FD }])}},// 顶部{type: polygon,shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis-10, topBasicsYAxis - 4],[basicsXAxis, topBasicsYAxis - 8],[basicsXAxis10, topBasicsYAxis - 4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: #387BFE },{ offset: 1, color: #7CB1FD }])}}]};}}]};option this.barchart.setOption(option);}, 若文章对你有帮助点个赞吧
