vue之折线图

系统管理员 2022-12-08 05:15 147阅读 0赞

<template>
        <div style="width: 100%; height: 100%;overflow: scroll">
            <ve-line :data="data" :title="title" :settings="chartSettings" :legend="legend" :height="height" :grid="grid" :xAxis="xAxis" :yAxis="yAxis" :tooltip="tooltip" :extend="chartExtend" :events="events" :colors="colors" style="margin: 5px; border: solid 1px #1e1728;" @ready-once="readyOnce"></ve-line>
        </div>
    </template>
    
    <script> import "echarts/lib/component/legendScroll"; import "echarts/lib/component/tooltip"; import "echarts/lib/component/title"; import VeLine from 'v-charts/lib/line.common' export default { name: 'LineChartWithArea', components: { VeLine }, props: { height: String, data: Object, titleText: String, group: String }, data() { let colors = [ "#7eb26d", "#ffc107", "#673ab7", "#03a9f4", "#EF843C", "#E24D42", "#1F78C1", "#9c27b0", "#705DA0", "#508642", "#CCA300", "#447EBC", "#C15C17", "#890F02", "#0A437C", "#6D1F62", "#584477", "#db3c89", "#F4D598", "#70DBED", "#F9BA8F", "#AEA2E0", "#629E51", "#e53441", "#64B0C8", "#08209e", "#109e09", "#9e0c3d", "#20209e", "#1758a5", "#1758a5", "#1758a5", "#1758a5", ] return { events:{ }, title: { text: ' ', x: 'center', y: 'top', textStyle: { fontSize: 12, fontWeight: 'bold', color: '#1c9ed2', } }, chartExtend: { series(v) { v.forEach((i, idx) => { // i.areaStyle = { // normal: { // color: colors[idx] // } // }; i.symbol = 'none'; i.itemStyle = { normal: { lineStyle: { width: 1 }, } } }) return v }, }, colors: colors, chartSettings: { area: false }, legend: { show: true, x: 'center', y: 'bottom', icon: 'stack', itemWidth: 10, itemHeight: 10, type: "scroll", textStyle: { color: '#f3f4f5' }, }, tooltip: { // confine: true, show: true, trigger: 'axis', formatter: function (params) { let newParams = []; let tooltipString = []; newParams = [...params]; newParams.sort((a,b) => { return b.value[1] - a.value[1]}); newParams.forEach((p) => { const cont = p.marker + ' ' + p.seriesName + ': ' + p.value[0] +" " + p.value[1] + '<br/>'; tooltipString.push(cont); }); return tooltipString.join(''); }, // formatter: function(params) { // let astr = ''; // console.log(params); // params.forEach(ele => { // const data = ele.data // for (const key in data) { // // 不为0的展示 // astr += ` // <div style="display: block;height:20px;width: 50%;float:left;"> // <i style="width: 10px;height: 10px;display: inline-block;background: ${ele.color};border-radius: 10px;"></i> // <span>${ele.seriesName}: ${data[key]}</span> // </div> // ` // } // }) // const b = '<div style="width: 100%;">' + astr + '<div>' // return b // }, // position: function(point, params, dom, rect, size) { // return [point[1], 0] // } // position: function(point, params, dom, rect, size){ // return [0,point[1]]; // }, extraCssText:'text-align: right; overflow: scroll', position: function (pt) { return ["10%", '10%']; } }, grid: { left: '25px', right: '20px', top: '15%', bottom: '15%', containLabel: true, borderColor: '#ffffff' }, xAxis: [ { axisLabel: { fontSize: 16, color: '#e3f1ff' }, type: 'category', boundaryGap: false, axisLine: { show: true, lineStyle: { color: "#0b3e53" } }, splitLine: { show: false, lineStyle: { color: "#5794d9" } }, }, ], yAxis: [ { splitLine: { show: false, lineStyle: { color: "#5794d9" } }, axisLabel: { fontSize: 16, color: '#e3f1ff' }, axisLine: { show: true, lineStyle: { color: "#0b3e53" } }, },`` ], } }, mounted() { }, watch: { titleText: { handler(newName) { console.log(newName) this.title.text = newName }, deep: true, immediate: true }, }, methods: { readyOnce(echart, options, echartsLib){ console.log(this.group) if(this.group !== undefined && this.group !== "") { echart.group = this.group; echartsLib.connect(this.group); } let triggerAction = function(action, selected) { let legend = []; for ( let name in selected) { if (selected.hasOwnProperty(name)) { legend.push({ name: name}); } } echart.dispatchAction({ type: action, batch: legend }); }; let isFirstUnSelect = function(selected) { let unSelectedCount = 0; for ( let name in selected) { if (!selected.hasOwnProperty(name)) { continue; } if (selected[name] === false) { ++unSelectedCount; } } return unSelectedCount===1; }; let isAllUnSelected = function(selected) { let selectedCount = 0; for ( let name in selected) { if (!selected.hasOwnProperty(name)) { continue; } if (selected[name] === true) { ++selectedCount; } } return selectedCount===0; }; this.events = { legendselectchanged: function(obj) { let selected = obj.selected; let legend = obj.name; if (selected !== undefined) { if (isFirstUnSelect(selected)) { triggerAction('legendToggleSelect', selected); } else if (isAllUnSelected(selected)) { triggerAction('legendSelect', selected); } } } } } }, } </script>