Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to generate a line chart by vue+F2". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Effect drawing

2. Open a command window and install F2 through npm

Npm install @ antv/f2-- save

3. Use import or require to introduce F2

Const F2 = require ('@ antv/f2')

4. Create a canvas tag with width and height on the page, and specify id:

5. Write the code of chart drawing

Const F2 = require ("@ antv/f2") Export default {name: "aaa", data () {return {chartData: [{date: "2017-06-05", value: 116}, {date: "2017-06-06", value: 129}, {date: "2017-06-07" Value: 135}, {date: "2017-06-08", value: 86}, {date: "2017-06-09", value: 73}, {date: "2017-06-10", value: 85} {date: "2017-06-11", value: 73}, {date: "2017-06-12", value: 68}, {date: "2017-06-13", value: 92}, {date: "2017-06-14" Value: 130}, {date: "2017-06-15", value: 245}, {date: "2017-06-16", value: 139}, {date: "2017-06-17", value: 115} {date: "2017-06-18", value: 111}, {date: "2017-06-19", value: 309}, {date: "2017-06-20", value: 206}, {date: "2017-06-21" Value: 137}, {date: "2017-06-22", value: 128}, {date: "2017-06-23", value: 85}, {date: "2017-06-24", value: 94}]} }, created () {}, methods: {drawChart () {var _ this = this; / / Step 1: create a Chart object const chart = new F2.Chart ({id: "myChart", pixelRatio: window.devicePixelRatio / / specify resolution}) / / Step 2: load the data source chart.source (_ this.chartData, {value: {tickCount: 10, / / the number of scale points on the axis min: 50, / / manually specify the minimum value of the value field max: 350 / manually specify the maximum value of the value field}, date: {type: "timeCat" / / specify the date field as the time type range: [0,0.8], / / account for 80% of the x axis tickCount: 3 / / the number of scale points on the axis}}) / / Step 3: use graphic syntax to draw charts / / Note: f2 is the mobile chart library. The legend chart.tooltip ({custom: true, / / whether to customize the tooltip prompt box showXTip: true, / / whether to display the auxiliary information of the X axis showYTip: true, / / whether to display the auxiliary information of the Y axis snap: true, / / whether to accurately locate the auxiliary line to the data point crosshairsType: "xy") can be displayed only on the mobile side. / / types of auxiliary lines crosshairsStyle: {/ / configure the style of auxiliary lines lineDash: [2], / / density of dotted lines stroke: "rgba (255,0,0,0.25)", lineWidth: 2}}) / / Axis configuration (here it is configured for axes corresponding to date) chart.axis ("date", {label: function label (text, index, total) {const textCfg = {textAlign: "center"} / / left alignment of the first point, right alignment of the last point, center of the rest, left alignment of if (index = 0) {textCfg.textAlign = "left";} else if (index = total-1) {textCfg.textAlign = "right";} textCfg.text = "day:" + text / / textCfg.text supports text formatting return textCfg;}}); / / points are connected into a line according to the x axis to form a line line chart.line (). Position ("date*value"); / / Step 4: rendering chart.render ();}}, components: {}, mounted () {var _ this = this; _ this.drawChart () }, computed: {}, watch: {}}; .container {background-color: # fff;} # myChart {width: 100%; height: 260px;} "how vue+F2 generates a line chart" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.