123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- <template>
- <div :class="className" :style="{ height: height, width: width }" />
- </template>
- <script>
- import echarts from "echarts";
- require("echarts/theme/macarons");
- import resize from "./mixins/resize";
- import {
- selectTypeList
- } from "@/api/knowledge";
- export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: "chart"
- },
- width: {
- type: String,
- default: "100%"
- },
- height: {
- type: String,
- default: "350px"
- },
- kenValue:{
- type:Number,
- default:null
- }
- },
- data() {
- return {
- chart: null,
- chartData: [
- {
- category: "Customer",
- Document: 8,
- Video: 77,
- Audio: 22,
- Image: 76,
- Text: 11,
- Other: 88
- },
- {
- category: "Developer",
- Document: 23,
- Video: 52,
- Audio: 80,
- Image: 30,
- Text: 22,
- Other: 20
- },
- {
- category: "Manager",
- Document: 98,
- Video: 65,
- Audio: 18,
- Image: 92,
- Text: 71,
- Other: 90
- },
- {
- category: "Designer",
- Document: 93,
- Video: 33,
- Audio: 98,
- Image: 10,
- Text: 36,
- Other: 11
- }
- ],
- dirList:[]
- };
- },
- watch:{
- kenValue:{
- handler(val) {
- this.init(val)
- }
- }
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart();
- });
- },
- beforeDestroy() {
- if (!this.chart) {
- return;
- }
- this.chart.dispose();
- this.chart = null;
- },
- methods: {
- initChart() {
- this.chart = echarts.init(this.$el, "macarons");
- const categories = this.chartData.map(item => item.category);
- const series = ["Document", "Video", "Audio", "Image", "Text", "Other"].map(type => ({
- name: type,
- type: "bar",
- barWidth: "10%",
- data: this.chartData.map(item => item[type]),
- itemStyle: { color: this.getColor(type) }
- }));
- this.chart.setOption({
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow"
- }
- },
- legend: {
- data: ["Document", "Video", "Audio", "Image", "Text", "Other"],
- bottom: 0
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "10%",
- top: "3%",
- containLabel: true
- },
- xAxis: [
- {
- type: "category",
- data: categories,
- axisTick: { show: false },
- axisLine: { show: false },
- axisLabel: {
- interval: 0,
- align: 'center',
- margin: 20,
- fontSize: 14
- },
- axisTick: {
- alignWithLabel: true
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#ddd'
- }
- }
- }
- ],
- yAxis: [
- {
- type: "value",
- max: 100
- }
- ],
- series: series
- });
- },
- getColor(type) {
- const colorMap = {
- Document: "#FF7B7B",
- Video: "#9D96F5",
- Audio: "#4ADEDE",
- Image: "#FFA400",
- Text: "#5D7DFF",
- Other: "#4ADEDE"
- };
- return colorMap[type];
- },
- /* 获取知识库目录 */
- init(val){
- const tList={
- page: 1,
- pageSize: 9999,
- kb_id: val,
- }
- selectTypeList(tList).then(res=>{
- console.log(res);
- if(res.status!==200) return
- this.dirList=res.data.dataList
- })
- },
- }
- };
- </script>
|