picture_echarts2
v1.0.3
Published
vue2对echarts的二次分装模块
Downloads
10
Readme
一、功能
采用vue2对echarts的二次分装模块
二、安装
npm
1、安装echarts
npm install echarts
2、安装 picture_echarts2
npm install picture_echarts2
三、例子
// main.js
// 导入
import echarts2 from 'picture_echarts2/echarts2';
// 注册插件
Vue.use(echarts2)
<echarts2 :options="options"></echarts2>
options: {
title: [
{
text: "已完成",
x: "center",
top: "55%",
textStyle: {
color: "#FFFFFF",
fontSize: 16,
fontWeight: "100",
},
},
{
text: "75%",
x: "center",
y: "center",
textStyle: {
fontSize: "60",
color: "#FFFFFF",
fontFamily: "DINAlternate-Bold, DINAlternate",
foontWeight: "600",
},
},
],
backgroundColor: "#111",
polar: {
radius: ["42%", "52%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [60],
coordinateSystem: "polar",
},
{
name: "",
type: "pie",
startAngle: 80,
radius: ["56%"],
hoverAnimation: false,
center: ["50%", "50%"],
itemStyle: {
color: "rgba(66, 66, 66, .1)",
borderWidth: 1,
borderColor: "#5269EE",
},
data: [100],
},
{
name: "",
type: "pie",
startAngle: 80,
radius: ["38%"],
hoverAnimation: false,
center: ["50%", "50%"],
itemStyle: {
color: "rgba(66, 66, 66, .1)",
borderWidth: 1,
borderColor: "#5269EE",
},
data: [100],
},
],
}