vue+echarts实现3D柱形图
更新时间：2022年04月02日 11:49:43 作者：Cherry☼
这篇文章主要为大家详细介绍了vue+echarts实现3D柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+echarts实现3D柱形图的具体代码，供大家参考，具体内容如下
1、安装echarts
npm install echarts --save
2、引入echarts
import echarts from "echarts"; //修改原型链,可在全局使用 Vue.prototype.$echarts = echarts;
3、创建图表 首先需要在 HTML 中创建图表的容器
<div id="echarts_park"></div>
//图表的容器必须指定宽高
#echarts_park {
width: 400px;
height: 200px;
}4、渲染图表
mounted() {
this.drawPark();
},
methods: {
drawPark() {
//初始化echarts
let myChart = this.$echarts.init(document.getElementById("echarts_park"));
let num= [
"12",
"12",
"12",
"14",
"12",
"12",
"12",
"14",
"12",
"12",
"12",
];
let xData = [
"杭州市",
"杭州市",
"杭州市",
"杭州市",
"杭州市",
"杭州市",
"杭州市",
"杭州市",
"杭州市",
"杭州市",
"杭州市",
];
var colors = [
{
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#0088F1",
},
{
offset: 1,
color: "#00D1FF",
},
],
},
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#67D0FF",
},
{
offset: 1,
color: "#3486DA",
},
],
},
];
var barWidth = 18;
// 绘制图表
myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tipString = params[0].axisValue + "<br />";
var key = "value";
params.sort(function (obj1, obj2) {
var val1 = obj1[key];
var val2 = obj2[key];
if (val1 < val2) {
return 1;
} else if (val1 > val2) {
return -1;
} else {
return 0;
}
});
var indexColor;
for (var i = 0, length = params.length; i < length; i++) {
if (params[i].componentSubType == "bar") {
indexColor = params[i + 1].color;
tipString +=
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' +
indexColor +
'"></span>';
tipString +=
'<span data-type ="lineTip" data-val=' +
params[i].value +
">" +
params[i].seriesName +
"：" +
params[i].value +
"</span><br />";
}
}
return tipString;
},
},
grid: {
left: "3%",
right: "3%",
bottom: "6%",
top: "20%",
containLabel: true,
},
xAxis: {
type: "category",
data: xData,
offset: 6,
axisLine: { lineStyle: { color: " #CCCCCC" } },
axisTick: {
alignWithLabel: true,
},
axisLabel: {
interval: 0,
// rotate: 20,
textStyle: {
color: "#000",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 13,
margin: 10,
},
},
},
yAxis: {
type: "value",
name: "(%)",
nameTextStyle: {
align: "right",
color: "#4D4D4D",
},
axisLine: {
show: false,
lineStyle: { color: "#CCCCCC" },
},
axisTick: { show: false },
splitLine: {
show: true,
lineStyle: { type: "dashed", color: "#CCCCCC" },
},
axisLabel: {
textStyle: {
color: "#4D4D4D",
fontSize: 14,
},
},
},
series: [
{
name: "2020",
type: "bar",
barGap: "14%",
barWidth: 18,
itemStyle: {
normal: {
color: colors[1],
barBorderRadius: 0,
},
},
data: num,
},
{
z: 2,
name: "2020",
type: "pictorialBar",
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
symbol: "diamond",
symbolOffset: ["0%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: colors[1],
},
},
},
{
z: 3,
name: "2020",
type: "pictorialBar",
symbolPosition: "end",
data: qichu,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [barWidth, (10 * (barWidth - 1)) / barWidth],
itemStyle: {
normal: {
borderColor: "#67D0FF",
borderWidth: 2,
color: "#67D0FF",
},
},
},
],
});
},
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue编写检测敏感词汇组件的多种思路，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了nuxt中刷新页面后防止store值丢失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了Vue中keep-alive组件的使用方法和一些基础配置,keep-alive是Vue中的一个抽象组件,可以缓存组件实例,提高性能,本文给大家介绍vue中keep-alive组件使用和一些基础配置方法,感兴趣的朋友一起看看吧2024-10-10
更好的了解项目的目录结构,能更好的去开发项目,下面这篇文章主要给大家介绍了关于vue3项目目录结构的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
Vue事件获取事件对象之event.currentTarget详解
这篇文章主要介绍了Vue事件获取事件对象之event.currentTarget,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了详解Vue3 中的计算属性及侦听器，文章围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的朋友可以看下一下2022-08-08
Vue-cli3 $ is not defined错误问题及解决
这篇文章主要介绍了Vue-cli3 $ is not defined错误问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家详细介绍了vue中使用Pinia是五个实用技巧,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下2023-11-11
这篇文章主要介绍了浅谈VUE中演示v-for为什么要加key，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
Vue3使用ref与reactive创建响应式对象的示例代码
这篇文章主要详细介绍了Vue3使用ref与reactive创建响应式对象的方法步骤,文中通过代码示例和图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-02-02
最新评论