echarts有滑块

vue下使用echarts折线图及其横坐标拖拽功能

1. drawLine() {
2. let that = this,
3. lineDate = [],
4. dispatchCount = [],
5. finishCount = [],
6. newCount = [];
8. let param = {
9. // 参数
10. };
11. axios
12. .post(url, param)
13. .then(function(response) {
14. let rs = response.data.data;
15. if (rs != undefined && rs != [] && rs != null) {
16. for (let i = ; i < rs.dispatch.length; i++) {
17. lineDate.push(rs.dispatch[i].day);
18. dispatchCount.push(rs.dispatch[i].count);
19. }
20. for (let i = ; i < rs.finish.length; i++) {
21. finishCount.push(rs.finish[i].count);
22. }
23. for (let i = ; i < rs.new.length; i++) {
24. newCount.push(rs.new[i].count);
25. }
26. }
28. let lineChart = that.$echarts.init(
29. document.getElementById("lineChart")
30. );
32. 　　　　　　

　　　　　　lineChart.clear(); // 出现返回数据正确，图的趋势不正确的情况。多加这句代码清空画布！！！

1. 　　
3. lineChart.setOption({
4. tooltip: {
5. trigger: "axis"
6. },
7. legend: {
8. data: ["新增", "派单", "完成"]
9. },
10. grid: {
11. left: "10%", //因旋转导致名字太长的类目造成遮蔽，可以配合这两个属性
12. bottom: "10%" // 分别表示：距离左边距和底部的距离，具体数值按实际情况调整
13. },
15. xAxis: {
16. type: "category",
17. boundaryGap: false,
18. data: lineDate,
19. axisLabel: {
20. interval: , //0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）
21. rotate: - //倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
22. }
23. },
24. yAxis: {
25. type: "value",
26. axisLabel: {
27. // formatter: function(v) {
28. // return parseInt(v); // 让y坐标数组为整数
29. // },
30. rotate: -
31. },
33. },
34. // x轴拖动
35. dataZoom: [
36. {
37. type: "slider",
38. realtime: true, //拖动滚动条时是否动态的更新图表数据
39. height: , //滚动条高度
40. start: , //滚动条开始位置（共100等份）
41. end: //结束位置（共100等份）
42. }
43. ],
45. series: [
46. {
47. name: "新增",
48. type: "line",
49. data: newCount
50. },
51. {
52. name: "派单",
53. type: "line",
54. data: dispatchCount
55. },
56. {
57. name: "完成",
58. type: "line",
59. data: finishCount
60. }
61. ]
62. });
63. });
64. },