1、echarts環形圖設置主標題text和副標題subtext在環形圖中居中顯示
可以通過設置主標題和副標題的textAlign來設置，title-----textAlign
methods: { initChart() { let self = this; // {height:'250px'} 設置title 在center 必須要知道echarts 高度 this.chart = echarts.init(this.$refs.ringChart, { height: self.height }); this.chart.setOption({ title: { text: self.ringTitle, subtext: self.ringTotal, //副標題 left: "49%", top: "center", textStyle: { //主標題樣式 color: "#666", fontWeight: "normal", fontSize: 12, }, subtextStyle: { //副標題樣式 color: "#000", fontSize: 14, fontWeight: "bold", }, textAlign: "center", // 主、副標題水平居中顯示 }, tooltip: { trigger: "item", }, color: ["#f5f5f5", "#fbd5d4"], series: [ { type: "pie", center: ["50%", "50%"], radius: ["45%", "65%"], data: this.chartData, showEmptyCircle: true, // height: this.height, //設置高度 emphasis: { // hover 樣式 itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, }, ], }); }, },
問題：設置標題居中時，必須要知道echarts高度才會成功，對于動態渲染的echarts，可以在init echarts時，設置高度；
this.chart = echarts.init(this.$refs.ringChart, { height: self.height });
2、echarts動態傳參
父組件：
<lineBar :linexAxis="linexAxis" :lineSeries1="lineSeries1" :lineSeries2="lineSeries2" ></lineBar>
import lineBar from "../../dashbord/lineBar"; export default { components: { lineBar }, data() { return { linexAxis: ["星期一", "星期二"], lineSeries1: { name: "星期一", data: ["10", "6", "19"], }, lineSeries2: { name: "星期二", data: ["9", "20", "5"], }, }; }, };
子組件：
props接收數據并watch數據：
mixins: [resize], props: { className: { type: String, default: "chart", }, width: { type: String, default: "100%", }, height: { type: String, default: "300px", }, linexAxis: { type: Array, required: () => [], }, lineSeries1: { type: Object, required: () => {}, }, lineSeries2: { type: Object, required: () => {}, }, }, data() { return { chart: null, }; }, mounted() { this.$nextTick(() => { this.initChart(); }); }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; },
watch: { linexAxis(newVal) { this.chart.setOption({ xAxis: { data: newVal, }, }); }, lineSeries1: { handler(newVal) { this.chart.setOption({ series: [ { name: newVal.name, data: newVal.data, }, ], }); }, deep: true, }, lineSeries2: { handler(newVal) { this.chart.setOption({ series: [ {}, { name: newVal.name, data: newVal.data, }, ], }); }, deep: true, }, },
3、echarts子組件觸發點擊事件，父組件刷新數據
子組件：
$emit,讓父組件監聽到自定義事件 ；
initChart() { let that = this; this.chart = echarts.init(this.$el, "macarons"); that.chart.off("click"); //防止 觸發多次 echarts 點擊事件 that.chart.on("click", function (params) { that.$emit("getMessage", params.dataIndex); }); this.chart.setOption({ ... ... }); },
父組件：
<lineBar :linexAxis="linexAxis" :lineSeries1="lineSeries1" :lineSeries2="lineSeries2" @getMessage="showMsg" ></lineBar>
methods:{
showMsg(title) {
console.log(title)
},
}
4、自定義設置柱狀圖橫坐標顯示換行
xAxis: { axisLabel: { color: "#666", align: 'center', formatter(params) { // 當字符串長度超過3時 var newParamsName = ""; var paramsNameNumber = params.length; var provideNumber = 3; //一行顯示幾個字 var rowNumber = Math.ceil(paramsNameNumber / provideNumber); if (paramsNameNumber > provideNumber) { for (var p = 0; p < rowNumber; p++) { var tempStr = ""; var start = p * provideNumber; var end = start + provideNumber; if (p == rowNumber - 1) { tempStr = params.substring(start, paramsNameNumber); } else { tempStr = params.substring(start, end) + "\n"; } newParamsName += tempStr; } } else { newParamsName = params; } return newParamsName; }, }, }
5、數據量過大，設置滑塊顯示
dataZoom: [ { type: 'slider', realtime: true, start: 0, end: 50, height: 14, bottom: 0, xAxisIndex: [0], fillerColor: "rgba(139, 139, 139,.2)" // fillerColor: "rgba(171,145,255,.2)" }, ],
echarts更多案例網址（來源網絡）：