arcthur
commented
6 years ago viser 暴露了 Global 可以配
Closed Aric-sky closed 5 years ago
arcthur
commented
6 years ago viser 暴露了 Global 可以配
Aric-sky
commented
6 years ago viser 暴露了 Global 可以配
能不能code一下具体的写法，viser-vue这方面的文档，真找不到
lceric
commented
6 years ago 可以查看datav文档：
const { Global } = G2; // 获取 Global 全局对象
Global.registerTheme('newTheme', {
colors: [ 'red', 'blue', 'yello' ]
}); // 传入两个参数，一个参数是主题的名称，另一个参数是主题配置项如果需要更改主题，可以前往viser主题构建工具导出定制的主题数据
// theme为导出的主题数据
var theme = {
// 主题数据
}
// 注册主题
const { Global } = window.G2
Global.registerTheme('myTheme', theme)
//注册完后，设置主题
Global.setTheme('myTheme')
kinghoo5201
commented
6 years ago const { Global } = G2; // 获取 Global 全局对象 Global.registerTheme('newTheme', { colors: [ 'red', 'blue', 'yello' ] }); // 传入两个参数，一个参数是主题的名称，另一个参数是主题配置项
在viser中如何配置？
也可以在geom组件中用color属性 如<Pie position="字段名" color={["区分颜色的字段名",color数组]}>
ShawshankLin
commented
5 years ago {["区分颜色的字段名",color数组]}
vue的写法是怎么样的呢？
kinghoo5201
commented
5 years ago {["区分颜色的字段名",color数组]}
vue的写法是怎么样的呢？
这个是更改color的例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Vue example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://unpkg.com/viser-vue/umd/viser-vue.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="mount"></div>
<script type="text/babel">
Vue.use(ViserVue.default);
const { Global } = ViserVue;
console.log(Global);
const sourceData = [
{ item: "事例一", count: 40 },
{ item: "事例二", count: 21 },
{ item: "事例三", count: 17 },
{ item: "事例四", count: 13 },
{ item: "事例五", count: 9 }
];
const scale = [
{
dataKey: "percent",
min: 0,
formatter: ".0%"
}
];
const dv = new DataSet.View().source(sourceData);
dv.transform({
type: "percent",
field: "count",
dimension: "item",
as: "percent"
});
const data = dv.rows;
const color_1 = ["red", "orange", "yellow", "green", "blue"];
const color_2 = ["blue", "green", "yellow", "orange", "red"];
// 一定要加个key来强制图形重渲染
new Vue({
el: "#mount",
template: `
<div style="padding:100px;" :key="color_theme">
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
<v-tooltip :showTitle="false" dataKey="item*percent" />
<v-axis />
<v-legend dataKey="item" />
<v-pie position="percent" :color="['item',color]" :v-style="pieStyle" :label="labelConfig" />
<v-coord type="theta" />
</v-chart>
<div style="marign-top:50px;margin-left:auto;margin-right:auto;text-align:center;">
<button @click="changeColor">change theme</button>
</div>
</div>
`,
data() {
return {
data,
scale,
height: 400,
color: color_1,
color_theme: "color_1",
pieStyle: {
stroke: "#fff",
lineWidth: 1
},
labelConfig: [
"percent",
{
formatter: (val, item) => {
return item.point.item + ": " + val;
}
}
]
};
},
methods: {
changeColor() {
const flag = this.$data.color_theme === "color_1";
this.$data.color_theme = flag ? "color_2" : "color_1";
this.$data.color = flag ? color_2 : color_1;
}
}
});
</script>
</body>
</html>
const { Global } = G2; // 获取 Global 全局对象 Global.registerTheme('newTheme', { colors: [ 'red', 'blue', 'yello' ] }); // 传入两个参数，一个参数是主题的名称，另一个参数是主题配置项
在viser中如何配置？
这个例子是viser-vue中用global.registerTheme切换theme的例子
const { Global } = G2; // 获取 Global 全局对象 Global.registerTheme('newTheme', { colors: [ 'red', 'blue', 'yello' ] }); // 传入两个参数，一个参数是主题的名称，另一个参数是主题配置项
在viser中如何配置？