jie-echarts
v0.1.3
Published
echarts组件
Downloads
5
Maintainers
Readme
jie-echarts
安装
npm install jie-echarts
说明
echart 进行二次封装的 vue 组件
使用
<div id="app">
<jie-echarts :options="echartsOptions"></jie-echarts>
</div>
</template>
ts 的使用方式
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import jieEcharts from "jie-echarts";
@Component({
components: {
jieEcharts
}
})
export default class TestJieEchartsPreview extends Vue {
protected echartsOptions = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line"
}
]
};
}
</script>
开启 echart 的 loading
通过添加 loading 属性可以控制 echarts 的 loading
:loading="loading"
//模拟loading
private loading = false;
created() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 1000);
}
捕获 echart 点击事件
通过添加 @eclick 事件绑定进行捕获
@eclick="eclick"
eclick(params: any) {
console.log("params :>> ", params);
}
常规使用方式
<script>
import jieEcharts from 'jie-echarts';
export default {
name: 'Test',
components: {
jieEcharts
},
data () {
return {
echartsOptions: {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line"
}
]
}
}
}
}
</script>