echarts 3d柱状图,echart 3d柱状图
这篇文章主要为大家详细介绍了vue echarts实现三维(三维的缩写)柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue echarts实现三维(三维的缩写)柱形图的具体代码，供大家参考，具体内容如下
1、安装echarts
新公共管理安装电子图表-保存
2、引入echarts
从“电子海图”导入电子海图；
//修改原型链，可在全局使用
vue。原型。$ e图表=e图表；
3、创建图表 首先需要在 HTML 中创建图表的容器
div id=echarts_park/div
//图表的容器必须指定宽高
#echarts_park {
宽度：400像素
高度：200像素
}
4、渲染图表
已安装(){
这个。draw park()；
},
方法：{
drawPark() {
//初始化展示
让我的图表=这个图表。init(文档。getelementbyid( e charts _ park )；
let num=[
12,
12,
12,
14,
12,
12,
12,
14,
12,
12,
12,
];
让扩展数据=[
杭州市，
杭州市，
杭州市，
杭州市，
杭州市，
杭州市，
杭州市，
杭州市，
杭州市，
杭州市，
杭州市，
];
var colors=[
{
类型："线性",
x: 0，
x2: 1，
y: 0，
y2: 0，
色彩停止点：[
{
偏移量：0,
颜色： #0088F1 ，
},
{
偏移量：1,
颜色： #00D1FF ，
},
],
},
{
类型："线性",
x: 0，
x2: 0，
y: 0，
y2: 1，
色彩停止点：[
{
偏移量：0,
颜色： # 67D0FF ，
},
{
偏移量：1,
颜色： #3486DA ，
},
],
},
];
var barWidth=18
//绘制图表
myChart.setOption({
工具提示：{
触发器："轴",
axisPointer: {
//坐标轴指示器，坐标轴触发有效
类型：阴影，//默认为直线，可选为：线条 阴影
},
格式化程序：函数（参数){
var tipString=params[0].轴值“br/”；
var key= value
params.sort(function (obj1，obj2) {
var val 1=obj 1[key]；
var val 2=obj 2[key]；
if (val1 val2) {
返回1;
} else if (val1 val2) {
return-1；
}否则{
返回0;
}
});
定义变量索引颜色；
for(变量i=0，长度=params.lengthI长度；i ) {
if (params[i].componentSubType==bar) {
indexColor=params[i 1].颜色；
tipString=
span style= display:inline-block；右边距：5px边框半径：10px宽度：9px高度：9px背景：
索引色彩
/span ；
tipString=
span data-type= line tip data-val=
params[i].价值
params[i].系列名称
:
params[i].价值
/span br/；
}
}
返回tipString
},
},
网格：{
左："3%",
对："3%",
底部："6%",
顶部："20%",
containLabel: true，
},
xAxis: {
类型："类别",
数据：xData，
偏移量：6,
轴线：{线条样式：{颜色： # CCCCCC } }，
轴棒：{
alignWithLabel:真的，
},
axisLabel: {
间隔：0,
//旋转：20,
textStyle: {
颜色： #000 ,
字体样式：正常，
fontFamily:微软雅黑，
fontSize: 13，
边距：10,
},
},
},
亚西斯：{
类型："值",
名称："(%)",
nameTextStyle: {
对齐："右",
颜色： #4D4D4D ，
},
轴线：{
秀：假的，
线条样式：{ color: #CCCCCC }，
},
轴棒：{ show: false }，
分割线：{
秀：真的，
线条样式：{类型： 虚线，颜色： #CCCCCC }，
},
axisLabel: {
textStyle: {
颜色： #4D4D4D ，
fontSize: 14，
},
},
},
系列：[
{
名称： 2020 ,
类型："条形",
barGap:“14%”，
条宽：18,
项目样式：{
正常：{
颜色：彩色[1],
barBorderRadius: 0，
},
},
数据：数量，
},
{
z: 2，
名称： 2020 ,
键入：图片栏，
数据：[1,1,1,1,1,1,1,1,1,1,1,1,1],
符号："钻石",
symbolOffset: [0% ， 50%]，
symbolSize: [barWidth，10]，
项目样式：{
正常：{
颜色：彩色[1],
},
},
},
{
z: 3，
名称： 2020 ,
键入：图片栏，
符号位置："结束",
资料：启初，
符号："钻石",
symbolOffset: [0% ，-50%]，
符号大小：[条宽，(10 *(条宽- 1)) /条宽],
项目样式：{
正常：{
边框颜色： # 67D0FF ，
边界宽度：2,
颜色： # 67D0FF ，
},
},
},
],
});
},
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。