echarts使用
<template>
<div class="marginB" style="width:80%;margin: 0 auto;">
<div
id="main2"
style="float:left;width:100%;height: 500px;margin: 0 auto;"
></div>
<div
id="awardsdata"
:style="{ width: '1300px', height: '500px' }"
></div>
</div>
</template>
<script>
// 引入基本模板
const echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入折线图组件
require("echarts/lib/chart/line");
export default {
data() {
},
mounted() {
this.inquire();
},
methods: {
// 柱状图/折线图
initDate2() {
let myChart = echarts.init(document.getElementById("main2"));
const data1 = {
// 数据格式
categories: [
"四川移动本部",
"成都分公司",
"绵阳分公司",
"自贡分公司",
"攀枝花分公司",
"广元分公司",
"达州分公司",
"泸州分公司",
"广安分公司",
"巴中分公司",
"遂宁分公司",
"宜宾分公司",
"内江分公司",
"乐山分公司",
"德阳分公司",
"南充分公司",
"眉山分公司",
"阿坝分公司",
"甘孜分公司",
"凉山分公司",
"天府新区分公司"
],
values: [
10,
20,
30,
40,
50,
60,
70,
80,
90,
100,
0,
3.1,
5.9,
66,
5.5,
39,
11,
32,
33,
30,
34
]
};
// 绘制柱状图
myChart.setOption({
color: [ // 颜色
"rgb(53,160,255)",
"rgb(190,70,45)",
"rgb(86,206,71)",
"rgb(193,63,200)"
], // 对应下标的图形颜色
title: {
// 标题
text: "集中项目安排与使用进度", //主标题
x: "center", //x轴方向对齐方式
top: 10,
textStyle: {
fontSize: 16 // 字体大小
}
},
grid: { // 调整图表显示间距 {x:"10%",y:"10%",x2:"10%",y2:"10%"}
bottom: "20%",
},
tooltip: {
// 提示框
trigger: "axis",
axisPointer: {
type: "shadow"
},
/****
* 调整提示框显示的内容的另一种写法
* 标题 圆点 /颜色 内容{c} + %
* formatter: "<div> {b} <br/> <span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgb(90,146,255);\"></span> 进度 : {c} %<br/> </div>"
*/
formatter: function(params) { // 调整提示框显示的内容
var htmlStr = "";
htmlStr += "<div>" + params[0].name + "<br/>";
for (var i = 0; i < params.length; i++) {
let data = params[i];
//前面的原点和他的颜色
htmlStr +=
data.marker + data.seriesName + ":" + data.value + "%<br/>";
}
htmlStr += "</div>";
return htmlStr;
}
},
legend: {
// 图例
// orient: 'vertical', // vertical 竖着显示
// right: 50,
top: 35, // 调整图例的位置
data: [
"整体立项进度",
"分公司平均立项",
"集中项目报销进度(含供应链出入库数据)",
"时间进度"
]
},
toolbox: { // 工具栏
show: true,
orient: "vertical",
left: "right",
top: "center",
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar", "stack"] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: { // x轴
type: "category",
axisTick: { show: false, interval: 0, rotate: 30 },
data: data1.categories,
axisLabel: {
interval: 0, // 设置间隔为0
rotate: 45 //代表逆时针旋转
}
},
yAxis: [ // y轴
{
type: "value",
name: "",
axisLabel: {
formatter: "{value} %" // y轴数据后+%
}
// min: -10
}
],
/****
* 横向显示 更换type的值
* xAxis: {
* type: "value",
* axisLabel: {
* formatter: "{value} %"
* }
* },
* yAxis: [
* {
* type: "category",
* data: [],
* axisLabel: {
* interval: 0 // 设置间隔为0
* }
* }
* ]
*/
series: [
// 一个公司 几个对象 几根柱子/折线
{
name: "整体立项进度",
type: "bar",
data: data1.values // 预算总金额
/****
* label: { // 设置数据在图形右方显示
* show: true, // 开启显示
* // rotate: 70, // 旋转70度
* position: 'right', // 在右方显示
* distance: 20, // 距离图形元素的距离。当 position 为字符描述值(如 'top'、'insideRight')时候有效。
* verticalAlign: 'middle',
* textStyle: { // 数值样式
* color: 'black',
* fontSize: 12
* },
* formatter: '{c}%'
* }
*/
},
{
name: "分公司平均立项",
type: "line",
// stack: "one", 堆叠图
data: data1.values, // 预算总金额
},
{
name: "集中项目报销进度(含供应链出入库数据)",
type: "line",
// stack: "one", 堆叠图
data: data1.values // 预算总金额
},
{
name: "时间进度",
type: "line",
// stack: "one", 堆叠图
data: data1.values // 预算总金额
}
]
});
},
// 初始化 echarts 数据
async inquire(){
await this.$nextTick(()=>{ // 在dom数据渲染完成后 初始化echarts
this.initDate2()
})
}
},
}
</script>