VUE動(dòng)態(tài)排序柱狀圖
1、新建項(xiàng)目，下載echarts
npm install echarts@4.9.0
2、修改helloworld.vue
修改template：
? <div class="echart" id="mychart" :style="myChartStyle"></div>
修改script：
import * as echarts from "echarts";
export default {
? data() {
? ? return {
? ? ? myChart: {},
? ? ? sortData: [], //動(dòng)態(tài)排序數(shù)據(jù)
? ? ? myChartStyle: { float: "left", width: "100%", height: "400px" }, //圖表樣式
? ? ? dynamicSortZZTOption: {
? ? ? ? xAxis: {
? ? ? ? ? max: "dataMax"
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? type: "category",
? ? ? ? ? data: ["A", "B", "C", "D", "E"],
? ? ? ? ? inverse: true,
? ? ? ? ? animationDuration: 300,
? ? ? ? ? animationDurationUpdate: 300,
? ? ? ? ? max: 4 // only the largest 3 bars will be displayed
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? realtimeSort: true,
? ? ? ? ? ? name: "動(dòng)態(tài)變化",
? ? ? ? ? ? type: "bar",
? ? ? ? ? ? data: [],
? ? ? ? ? ? label: {
? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? position: "right",
? ? ? ? ? ? ? valueAnimation: true
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ],
? ? ? ? legend: {
? ? ? ? ? show: true
? ? ? ? },
? ? ? ? animationDuration: 3000,
? ? ? ? animationDurationUpdate: 3000,
? ? ? ? animationEasing: "linear",
? ? ? ? animationEasingUpdate: "linear"
? ? ? }
? ? };
? },
? mounted() {
? ? // 圖表初始化
? ? this.myChart = echarts.init(document.getElementById("mychart"));
? ? // 數(shù)據(jù)初始化
? ? for (let i = 0; i < 5; ++i) {
? ? ? this.sortData.push(Math.round(Math.random() * 200));
? ? }
? ? // 數(shù)據(jù)刷新
? ? setInterval(() => {
? ? ? this.pageUpdate();
? ? }, 3000);
? },
? methods: {
? ? // 數(shù)據(jù)刷新
? ? pageUpdate() {
? ? ? console.log(this.dynamicSortZZTOption.series[0].data);
? ? ? this.dynamicSortZZTOption.series[0].data = this.sortData;
? ? ? for (let i = 0; i < this.sortData.length; ++i) {
? ? ? ? if (Math.random() > 0.9) {
? ? ? ? ? this.sortData[i] += Math.round(Math.random() * 2000);
? ? ? ? } else {
? ? ? ? ? this.sortData[i] += Math.round(Math.random() * 200);
? ? ? ? }
? ? ? }
? ? ? this.myChart.setOption(this.dynamicSortZZTOption);
? ? ? //隨著屏幕大小調(diào)節(jié)圖表
? ? ? window.addEventListener("resize", () => {
? ? ? ? this.myChart.resize();
? ? ? });
? ? }
? }
};
刪除style即可。
吐槽：b站檢測(cè)到j(luò)s居然會(huì)警告環(huán)境異常無法提交。。。
