echarts实现立体柱状图,echarts立体环形图
这篇文章主要为大家详细介绍了vue3.0电子海图实现立体柱图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言：
vue3.0实现展示立体柱图
实现效果：
实现步骤：
1、安装展示
cnpm i -保存电子海图
2、页面定义容器
模板
div ref= echart class= echart div /div
/模板
3、js中引入展示
从“电子海图”导入*作为电子海图；
组件完整源码：
模板
div ref= echart class= echart div /div
/模板
脚本
从“电子海图”导入*作为电子海图；
从“vue”导入{ onMounted，toRefs，ref，reactive }。
导出默认值{
setup(){
让状态=反应({
xAxisData:[浩星,妍仔,哆啦a梦,李强,王颖,老王],
yAxisData:[4，22，1，11，23，11]，
yAxisData1:[1，1，1，1，1，1]，
echart: ref()，
})
const echartInit=()={
var myChart=echarts。初始化(状态。echart)；
//指定图表的配置项和数据
定义变量选项={
工具提示：{
触发器："轴",
axisPointer: {
类型：阴影，//默认为直线，可选为：线条 阴影
},
格式化程序：函数（参数){
定义变量字符串=
参数[0]。轴值
/br
参数[0]。标记
今天登录：
参数[0]。"价值"次
返回字符串；
},
},
textStyle: {
颜色： #333 ,
},
颜色：[#7BA9FA ， #4690FA]，
网格：{
containLabel: true，
左："10%",
顶部："20%",
底部："10%",
对："10%",
},
xAxis: {
类型："类别",
数据：state.xAxisData，
轴线：{
线型：{
颜色： #333 ,
},
},
轴棒：{
秀：假的，
},
axisLabel: {
边距：20,//刻度标签与轴线之间的距离。
textStyle: {
颜色： #000 ,
},
},
},
亚西斯：{
类型："值",
轴线：{
秀：真的，
线型：{
颜色： #B5B5B5 ，
},
},
分割线：{
线型：{
//使用深浅的间隔色
颜色：[#B5B5B5]，
类型：虚线，
不透明度：0.5,
},
},
axisLabel: {}，
},
系列：[{
数据：state.yAxisData，
堆栈：“zs”，
类型："条形",
barMaxWidth:自动，
酒吧宽度：60,
项目样式：{
颜色：{
x: 0，
y: 0，
x2: 0，
y2: 1，
类型："线性",
全局：假，
色彩停止点：[{
偏移量：0,
颜色： #5EA1FF ，
},
{
偏移量：1,
颜色： #90BEFF ，
},
],
},
},
},
//下面的立体，控制颜色是颜色第一个
{
数据：state.yAxisData1，
键入：图片栏，
最大宽度："20",
符号："钻石",
symbolOffset: [0， 50%]，
symbolSize: [60，15]，
zlevel: 2，
},
//上面的立体，控制颜色是颜色第二个
{
数据：state.yAxisData，
键入：图片栏，
最大宽度："20",
符号位置："结束",
符号："钻石",
symbolOffset: [0，-50%]，
symbolSize: [60，12]，
zlevel: 2，
}
],
};
//使用刚才指定的配置项和数据显示图表。
myChart.setOption(选项)；
}
//挂载
onMounted(()={
echartInit()
})
返回{
.toRefs(州)，
echartInit
};
}
}
/脚本
style lang=scss 范围。echartDiv{
宽度：100%；
高度：400px
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。