<div class="echartLine-wrap">
<div class="echartLine-title">
<img src="@/assets/icon.png" alt />
<div class="text">
<div>{{echartData.title}}</div>
<div>{{echartData.title2}}</div>
<div>{{echartData.title3}}</div>
</div>
</div>
<div ref="lineDom" id="myChart"></div>
</div>
</template>
<script>
export default {
name: "echartLine",
props: {
echartData: {
type: Object,
default: () => {}
}
},
data() {
return {
img: require("../assets/time_bj.png")
};
},
mounted() {
setTimeout(() => {
this.ButtomDrawLine();
}, 500);
},
created() {},
methods: {
ButtomDrawLine() {
let t = this;
let myChart = this.$echarts.init(this.$refs.lineDom);
myChart.setOption({
title: { text: "" },
tooltip: {
trigger: "axis",
borderRadius: 8, //边框圆角
backgroundColor: "rgba(51,204,204,0)", //背景颜色(此时为默认色)
formatter: function(params) {
let value = params[0].value;
let name = params[0].name;
let html = `
<div class='line-html'>
<span>
<span class='active' style="background: ${t.echartData.itemStyle.color}"></span>
${value}
</span>
<span>${t.echartData.title3}</span>
<span></span>
<span>${name}</span>
</div>
`;
return html;
},
textStyle: { color: "#ffff", align: "center", fontSize: 18 }
},
// legend: {
// left: 'right',
// textStyle: {//图例文字的样式
// color: '#ffffff',
// fontSize: 14
// },
// show: true,
// data: [
// {
// name: '审方数',
- 1
- 2
前往页